2019-04-16移动端和@media标签的使用

一.

1.必须引入的标签：<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

1..name="viewport" //设置视口（网页可绘制的区域）；
2.width=device-width //应用程序的宽度和屏幕的宽度是一样的；
3.height=device-height //应用程序的高度和屏幕的高是一样的；
4.initial-scale=1.0 //应用程序启动时候的缩放尺度（1.0表示不缩放）；
5.minimum-scale=1.0 //用户可以缩放到的最小尺度（1.0表示不缩放）；
6.maximum-scale=1.0 //用户可以放大到的最大尺度（1.0表示不缩放）；
7.user-scalable=no //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）；

2、<meta name="format-detection" content="telephone=no">

当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接

在 iPhone 上默认值是：

<meta name="format-detection" content="telephone=yes"/>

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接，那么可以这样写：

3、<meta content="email=no" name="format-detection" />//将不识别邮箱，告诉设备忽略将页面中的数字识别为电话号码。

其他详细meat标签设置地址：(https://blog.csdn.net/chose_doit/article/details/77839425)；

二.@media不同尺寸下不同的显示，class名自由更换

1.1280分辨率以上（大于1200px）

@media screen and (min-width:1200px){
#page{ width: 1100px;}
}

2.1100分辨率（大于960px，小于1199px）

@media screen and (min-width: 960px) and (max-width: 1199px) {
#page{ width: 960px; }
}

3.880分辨率（大于768px，小于959px）

@media screen and (min-width: 768px) and (max-width: 959px) {
#page{ width: 900px; }
}

4.440分辨率以下（小于479px）

@media only screen and (max-width: 479px) {
#page{ width: 300px; }
}
详细链接地址：https://www.cnblogs.com/xcxc/p/4531846.html