CSS-移动端页面（响应式）

媒体查询

• 创建一个服务器
  永远不要用file协议。
  npm i -g http-server
  之后在文件夹下运行http-server -c-1
• 电脑、纸张、都是媒体，媒体查询就是对你的媒体进行条件的查询。
  例子： 如果某个媒体宽度在0-800之间，就应用 body样式。满足条件就生效，不满足条件就不生效。
  media的语法：

@media (max-width: 800px){
  body {
    background: red;
    }
}

代码示例：

第二种写法

        @media (max-width: 320px){
            body {
                background: red;
            }
        }
        @media(min-width: 321px) and (max-width: 375px){
            body {
                background: orange;
            }
        }
        @media (min-width: 376px) and (max-width: 425px){
            body {
                background: green;
            }
        }
        @media (min-width: 426px) and (max-width: 768px){
            body {
                background: blue;
            }
        }
        @media (min-width: 769px){
            body {
                background: purple;
            }
        }

media和CSS的关系：

• 媒体查询结果可以用CSS文件代替具体内容。
  设配只有在满足最大宽度小于320px才会生效。（css始终会下载，当达到要求会生效）
  
• link标签是否生效是受media媒体查询条件影响的。
• 需要添加多个CSS来满足不同屏幕的宽度。
• 能随着你动的页面就是响应式页面。
• media是不影响性能的，页面中有多个media是没关系的。同时还要关注选择器的优先级。

隐藏元素：

dispaly :none ;隐藏
dispaly: block ;解除隐藏

• 导航隐藏与自适应：

1. 先做手机页面（mobile first）推荐，因为用户多。
2. 先做PC页面（desktop first）。

• 用了display:flex;justify-content:center / space-between就不需要用浮动了。
• 一种页面的两种状态，用JS做，两个页面的不同状态，用媒体查询。
• www.smashingmagazine.com是响应式布局。
  代码示例：

主要方案：

• 现在不推荐使用响应式。
• 根据不同的useragent返回不同的html 和css。
• 产生不同的网址，手机和PC完全两个代码。

移动端特点：

• 手机上的布局主要：flex。
• 手机上没有hover.
• 有touch事件。
• 没有resize。（窗口大小改变时发生的事件）
• 没有滚动条。
• 所有的框架都会封装一个通过touch事件模拟滑动事件，JS原生不支持。

例题：

TIM图片20181226163558.png

meta viewport

告诉浏览器，在展示页面的时候，不要把980Px当宽度，手机设备的宽度就是真实的宽度，不要进行缩放。快捷键：meta:vp   之后按tab键

补充说明：

• 响应式不实用，淘宝，京东等都不是响应式，是不同的网址。后端来做的，把手机端页面和电脑页面分开来。
• 只有一些简单的页面才做响应式。
• 根据不同的user agent返回不同的HTML。
• 页面缩放的原因：一开始的时候，手机屏幕300度像素，而电脑屏幕900像素，所以需要缩放。
• 用手机开任何一个网站都是缩放的。缩放比例：摸拟980px 。
  document.documentElement.clientWidth获取页面宽度。
• 用js获取手机屏幕像素，会得到980px，原因：用手机屏幕去模拟浏览器屏幕，进行缩放。
• meta:vp tab键就可以了。