响应式布局与媒体查询

一、为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

或者

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

其中，在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能.

上面两个meta视情况二选一添加

二、媒体查询,如 @media screen and (max-width/min-width:number) {}

常用的不同屏幕分辨率大小基本如下：

480px,768px,979px,1200px

适配顺序

(1)max-width:number0,如@media screen and (max-width:768px) {…}

表示当前设备分辨率小于等于768px，该媒体查询下的代码会生效。如果单纯使用max-width时，分辨率按照从大到小排列，大的在上面。

(2)(min-width: number1) and (max-width:number2),如

@media (min-width: 769px) and (max-width:1200px) {…}

表示当前设备如果>=769并且<=1200时，该代码会生效。注意768和769一个像素的差别

(3) min-width:number3,如@media screen and (min-width:1201px) {…}

表示当前设备分辨率大于等于1201px，该媒体查询下的代码会生效。如果单纯使用min-width时,分辨率按照从小到大排列，小的在上面。

注：以上仅是个人理解，有理解误差的地方欢迎指正。

赏

谢谢请我喝咖啡

支付宝