css3媒体查询

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/qq_40713392/article/details/85472392

• 将媒体查询写在样式的最后面（在媒体查询前写基础样式），防止不小心被覆盖
  如:

  body { background-color:lightblue; }
@media screen and (max-width: 300px) { body { background-color:lightblue; } }

• @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

• 浏览器支持情况：
  
  注意点：

• @media screen and (max-width: 300px) { body { background-color:lightblue; } }
  这里的screen是指设备屏幕，而后面指定的断点范围max-width: 300px是指浏览器呈现网页的可视区域的宽度，可用document.documentElement.clientWidth或者window.innerWidth该方法获取其宽度。而屏幕分辨率的宽用window.screen.width。

• 移动前端中常说的 viewport （视口）就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。
  在网页的中添加下面这行代码：
  添加这行代码的意义在于：视口的宽度（即网页的宽度）占满屏幕的宽度，缩放比为1.0（我个人见解）
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  width=device-width — 视口为设备宽度（就是人设置的一个宽度）//不设置的话默认为980px
  initial-scale=1.0 -------- 初始化的视口大小是1.0倍
  maximum-scale=1.0 ------ 最大的倍数是1.0倍
  user-scalable=0 ------ 不允许缩放视口
  需要注意的是：约束之后的视口宽度，不是自己的分辨率！！每个手机的分辨率，都要比自己的视口宽度大得多得多！ 最最重要的一句话：前端开发工程师，丝毫不关心手机的分辨率，我们只关心视口。