一丶CSS3的@media 查询
使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面,这对调试来说是一个极大的便利。
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
媒体类型(mediaType): screen: 电脑屏幕,平板电脑,智能手机. speech:屏幕阅读器等发声设备
media feature:
1.max-定义输出设备中的页面最大可见区域宽度
2.min-定义输出设备中的页面最小可见区域宽度
1.编写响应式页面
(1)设置Meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
width = device-宽度等于当前设备的宽度
initial-scale: 初始的缩放比例(默认设置为1.0,即代表不缩放)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
(2)加载兼容文件JS
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
(3)设置IE渲染方式默认为最高(可选)
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
ps:这段代码后面加了一个chrome=1,如果用户的电脑里安装了 chrome,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,如果没有安装,就显示IE最新的渲染模式。
示例:
(1)如果文档宽度大于等于 1170px 则应用花括号内的样式——修改body的背景颜色(background-color):
@media screen and (min- 1170px) {
body {
background-color:lightblue;
}
}
(2)当文档宽度大于等于 768px 并且小于等于992px ( width >=768 && width <=992)的时候显示的样式
@media screen and (min-768px) and (max-992px) {
/* CSS 代码 */
}
二丶移动端单位介绍
在W3C中把尺寸单位划为两类:相对长度单位和绝对长度单位
然而相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位
字体相对单位有:em、ex、ch、rem;
视窗相对单位则包含:vw、vh、vmin、vmax几种
绝对定位则是固定尺寸,它们采用的是物理度量单位:cm、mm、in、px、pt以及pc。但在实际应用中,我们使用最广泛的则是em、rem、px以及百分比(%)来度量页面元素的尺寸。
px: 绝对(固定)单位
缺点:任何情况下都是固定值,会导致布局在不同尺寸下的设备错位
%:相对定位(会有影响发生变化)相对于父级(自身)大小进行定位
缺点:能确定范围的还是比较好计算的,对于不太好确定值得地方不好使用百分比,并且会导致变形,高度一般不好控制
em: 相对定位 (会有影响发生变化) em=当前字体大小
缺点:会根据当前容器字体大小发生变化,假如每个容器字体大小不一致,那么计算会非常麻烦
rem
r==root
em=字体大小 font-size
rem 相对单位
只依赖于html字体大小
动态的修改根元素的font-size:
需要通过js去控制
/*获得页面宽度后动态修改html上的fontsize
* 320为iphone5设计稿下的页面宽度,如下设置后页面的页面在iphone5等宽屏幕上html
* 的font-size会变为20px,即 1rem = 100px 1px=0.05rem
* 所以设置元素尺寸的时候,如果测量设计稿 15px 则需设置尺寸为 (0.05*15)rem = 0.75rem
*/
!(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
var width = docEle.clientWidth;
console.log(width)
width && (docEle.style.fontSize = 20 * (width / 320) + "px");
};
win.addEventListener(evt, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);
}(document, window));
将上面的文件引入到当前项目中,
代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<title>移动端布局</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
html{
100%;
height: 100%;
/*font-size: 30px;*/
overflow: hidden;
}
body{
100%;
height: 100%;
overflow: auto;
}
.head-box{
100%;
height: 4rem;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.list{
margin-top: 4rem;
font-size: 1.5rem;
}
.list .item{
float: left;
7rem;
height: 7rem;
border: 1px solid black;
margin: 0.25rem;
}
</style>
</head>
<body>
<header class="head-box">
<div class="head-top"></div>
<div class="head-bottom"></div>
</header>
<ul class="list clearfix">
<li class="item">1111111</li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</body>
<script src="./js/resize.js"></script>
</html>
View Code
三丶Bootstrap学习
详情请见 http://www.bootcss.com/