HTML5学习_day12(3)--响应式布局

来源：互联网发布：mac相簿照片怎么删除编辑：程序博客网时间：2024/06/05 10:48

响应式布局设计的一般步骤

第一步：在head标签内设置meta标签

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

第二步：在style标签内通过媒体查询来设置meta query

meta query 是响应式设计的核心，它能够跟浏览器进行沟通，浏览应该呈现什么样的布局。

iphone3gs

当屏幕小于320px时执行里面的样式

@media only screen and (min-width: 100px) and (max-width: 320px) {

选择器{

样式

}

例子：

样式{----} 这里的样式在下面情况都不匹配时，使用这个样式。

@media only screen and (max-width: 320px){css样式} 这个样式在浏览器宽度小于320px适用

@media only screen and(min-width: 320px) and (max-width: 480px) { css样式 }这个样式在浏览器宽度大于320px且小于480px适用

第三部设置字体样式

一般来说字体直接调用下面的代码就行了

<span style="white-space:pre"></span><style>html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}@media screen and (min-width:800px){html{font-size:25px}}</style>

响应式布局应该注意的地方：

1.使用百分比

2.图片也要组成响应式图片(通过max-width)

img{

width:100% 这个图片无限拉伸导致图片会失真

max-width:100% 这个图片就可以最大显示不会失真

}

例子：

meta标签的另一种使用方式

<link rel="stylesheet" type="text/css" href="css/res.css" media="screen and (min-width: 960px)"/>

意思是当浏览器的分辨率大于960px的就应用res.css文件中的样式

页面代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/res.css" media="screen and (min-width: 960px)"/><link rel="stylesheet" type="text/css" href="css/res1.css" media="screen and (min-width: 640px) and (max-width: 960px)"/><link rel="stylesheet" type="text/css" href="css/res2.css" media="screen  and (max-width: 640px)"/><style type="text/css">#wrap{width: 80%;height: 90%;margin: 5% auto;border: 5px solid black;}/*文字自动适配*/html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}@media screen and (min-width:800px){html{font-size:25px}}/*@media only screen  and (max-width: 640px) {}@media only screen and (min-width: 640px) and (max-width: 960px) {}@media only screen and (min-width: 960px) {}*/</style></head><body><!--屏幕分辨率小于640 一个样式屏幕分辨率大于640小于960时 一个样式其他分辨率其他样式--><div id="wrap"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div><div class="div5">5</div><div class="div6">6</div></div></body></html>

res.css代码

#wrap:after{content: "";display: block;clear: both;}#wrap div{width: 32%;height: 100px;background: blue;margin-bottom: 10px;float: left;}#wrap .div2,#wrap .div5{margin-left: 2%;margin-right: 2%;}

res1.css代码

<span style="white-space:pre"></span>#wrap:after{content: "";display: block;clear: both;}.div1,.div3,.div5{width: 49%;height: 100px;background: blue;margin-bottom: 10px;float: left;}.div2,.div4,.div6{width: 49%;height: 100px;background: blue;margin-bottom: 10px;float: right;}

res2.css代码

<span style="white-space:pre"></span>#wrap div{width: 100%;height: 100px;background: blue;margin-bottom: 10px;}

0 0