-
将媒体查询写在样式的最后面(在媒体查询前写基础样式),防止不小心被覆盖
如: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 ------ 不允许缩放视口
需要注意的是:约束之后的视口宽度,不是自己的分辨率!!每个手机的分辨率,都要比自己的视口宽度大得多得多! 最最重要的一句话:前端开发工程师,丝毫不关心手机的分辨率,我们只关心视口。
css3媒体查询
最新推荐文章于 2024-04-23 17:13:57 发布