h5头文件里添加的自适配内容

来源:互联网 发布:达内 简历 知乎 编辑:程序博客网 时间:2024/05/16 11:35

响应式页面:


在html中的<head>标记内加入meta标签:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimun-scale=1.0,user-scalable=no" /><!--width=device-width:页面的宽度=设备宽度initial-scale:页面初始缩放比例maximum-scale:页面最大缩放比例minimun-scale:页面最小缩放比例user-scalable:是否允许用户手动缩放-->


在css中加入媒体查询,例如:
/*媒体查询*/
/*需求:当浏览器宽度小于800并且大于500的时候,一行显示两个*/
@media screen and (max-width:800px) and (min-width:500px) {    .container {        width:500px;    }    .container ul li {        width:50%;    }}


0 0
原创粉丝点击