CSS5-Mobilepage(responsive)

CSS5:Mobilepage(responsive)如果mobile和PC页面差异大，就不要写responsive，也不要写@media，直接把两个页面切开就可以了足以制作两个文件。至于判断你是在手机端还是PC端，就交给后台去做了。只有部分新闻站点和博客站点使用响应式，因为布局简单，响应式足够用1.Mediaquery媒体查询media:Computer,paper,areallmedia含义：如果媒体满足0到800之间，则将应用里面的样式注意：所以倒着写，先写大范围也可以指定详细范围：1.1引用方式也可以使用CSS文件方式引用https://segmentfault.com/（本站采用响应式风格）和https://www.smashingmagazine....can随屏幕宽度移动的页面是响应式页面1.2向设计师要网页设计图1.3隐藏菜单响应式预览地址（缩小浏览器宽度查看效果）1.3.1先做手机还是PCMobilefirst手机优先desktop推荐mobilefirstforPC，因为现在大部分都是用手机看网页1.3.2CSS优先级问题解决方案使用谷歌开发者工具查看CSS优先级，如果样式嵌入在进行调整html，比如jquerytoggle，那就直接用display:none!important;1.3.3flexlayoutheader{display:flex;的一些用法/*内部垂直居中*/align-items:center;}header.mobilMenu{显示躺着：弯曲；证明内容：空间周围；/*弹性布局显示：flex；这个容器使用flexlayoutjustify-content属性来定义项目在主轴上的对齐方式justify-content:space-around;每个容器内的物品在两边等距放置。*/背景颜色：#ccc；}代码预览<样式>*{边距：0;填充：0；}a{文本装饰：无；颜色：继承；}ul,ol{列表样式：无；}.logo{宽度：60px；高度：60px；背景：#000；边界半径：50%；}header{位置：相对；}header>button{位置：绝对；正确的:0;顶部：26px；}header.mobilMenu{显示：flex；证明内容：空间周围；/*弹性布局显示：flex；这个容器使用flexlayoutjustify-content属性来定义项目在主轴上的对齐方式justify-content:space-around;每个容器中物品两侧的间距相等。*/背景颜色：#ccc；}header.pcMenu{显示：无；}/*接下来做PC端*/@media(min-width:451px){/*一般写451，手机最大尺寸450px*//*先隐藏手机菜单和按钮*/header.mobilMenu{显示：无！重要；/**CSS优先级问题解决方法：1.直接使用display:none!important;2.使用谷歌开发者工具查看CSS优先级*/}header>button{display:none;}header{显示：flex;/*内部垂直居中*/align-items:center;}/*把pcMenu写成flex布局*/header.pcMenu{display:flex;/*只要改成flex中的子项，就会变成一行*/margin-left:20px;背景：红色；}header.pcMenu>li{margin-left:20px;}}<正文>