Media Query-响应式布局

Posted 2020-12-31 zhangym118

 

做响应式网站的时候，一定要在页面头部加入如下的声明：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

　　

width=device-width 样式中定义的宽度等于设备中定义的宽度

initial-scale=1.0 缩放比例1

minimum-scale=1.0 最大缩小比例1

maximum-scale=1.0 最大放大比例1

 

　　上段代码的最终作用是，移动客户端会按你设定的尺寸来显示页面。并且比例是1，不可通过手势放大缩小。 如果不写这段代码，移动客户端的浏览器真的会以它的1px来显示你设定的1px。最终效果是被缩放的效果，字小小的那种。 总之，做响应式网站的时候记得至少要加上如下声明。

什么是Media Query？

CSS2允许用户对特定media类型制定样式。

例如： 针对screen（屏幕）用 @media screen{ ... }里设定的样式。 针对打印样式用 @media print{ ... } 里的样式。

CSS3提供了更加强大的功能。 可以针对不同media类型设置样式，还根据设定的宽度或者高度指定样式。

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

　意思就是： 当屏幕的宽度小于等于500px的时候body的背景颜色为黑色。

 

　

相关英语

viewport = 视口

content = 内容

device-width = 设备宽度

initial-scale = 初始-比例

minimum-scale = 最小-比例

maximum-scale = 最大-比例

media = 媒体

query = 查询

 

---

 

仅供学习参考，原文链接：https://www.cnblogs.com/luoruiyuan/articles/5482042.html