CSS5:移动端页面(响应式)
如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做
只有一些新闻站点和博客站点用响应式,因为布局简单,响应式足够
1.媒体查询 media query
媒体:电脑,纸张,都是媒体
含义:如果媒体满足0到800 之间,那么会应用这里面的样式
注意:
<style> @media (max-width: 800px){/*如果媒体满足0-800 之间,那么会应用这里面的样式*/ body{ background-color: red; } } @media (max-width: 900px){/*如果媒体满足0-900 之间,那么会应用这里面的样式*/ body{/*这段媒体查询比上面优先级高,会将上面的覆盖,如果低于800了,会变成蓝色*/ background-color: blue; } } </style>所以要倒过来写,先写大范围
<style> @media (max-width: 768px){/*0-768*/ body{ background-color: blue; } } @media (max-width: 425px){/*0-425*/ body{ background-color: red; } } @media (max-width: 375px){/*0-375*/ body{ background-color: orange; } } @media (max-width: 320px){/*0-320*/ body{ background-color: black; } }@media (min-width: 769px){/*769~+++*/ /*超过769的*/ body{ background-color: green; } } </style>也可以规定详细范围:
也可以使用CSS文件的方法引用
https://segmentfault.com/ (这个网站就用了响应式)
还有https://www.smashingmagazine....
能随着你屏幕宽度动的页面就是响应式页面
预览地址(缩小浏览器宽度查看效果)
1.3.1先做手机还是先做PCMobile first 先做手机
desktop first 先做PC
推荐Mobile first,因为现在大部分都是手机看网页
用谷歌开发者工具查看CSS优先级,然后调整
如果style内嵌在html里,比如jquery的toggle,那么直接使用display: none !important;
1.3.3flex布局的一些用法 header{ display: flex; /*里面的垂直居中*/ align-items: center; } header .mobilMenu { display: flex; justify-content: space-around; /*flex布局display: flex;这个容器使用flex布局 justify-content属性定义了项目在主轴上的对齐方式。 justify-content: space-around;每个容器里面的项目两侧的间隔相等。*/ background-color: #ccc; } 代码预览
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>响应式页面</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } .logo { width: 60px; height: 60px; background: #000; border-radius: 50%; } header { position: relative; } header > button { position: absolute; right: 0; top: 26px; } header .mobilMenu { display: flex; justify-content: space-around; /*flex布局display: flex;这个容器使用flex布局 justify-content属性定义了项目在主轴上的对齐方式。 justify-content: space-around;每个容器里面的项目两侧的间隔相等。*/ background-color: #ccc; } header .pcMenu{ display: none; } /*接下来做pc端*/ @media (min-width: 451px) { /*一般都写 451,手机最大也就450px*/ /*先隐藏手机菜单和按钮*/ header .mobilMenu{ display: none !important; /**CSS优先级问题解决方法: 1.直接使用display: none !important; 2.用谷歌开发者工具查看CSS优先级 */ } header > button { display: none; } header{ display: flex; /*里面的垂直居中*/ align-items: center; } /*再把pcMenu写成flex布局*/ header .pcMenu{ display: flex;/*只要改成flex 里面的子项目就变成一行了*/ margin-left: 20px; background: red; } header .pcMenu>li{ margin-left: 20px ; } } </style> </head> <body> <header> <div></div> <button>菜单</button> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li> </ul> <ul> <li><a href="#">pc到航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li> </ul> </header> </body> <script> $(\'#menu\').on(\'click\', function () { $(\'.mobilMenu\').toggle();//toggle() 方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。 //缺点:如果使用toggle(),他会把display这个style的属性内嵌到放在html里. }) </script> </html> 手机端要加一个meta viewport