meta
将屏幕按1:1的比例显示
在网页代码的头部,加入一行viewport标签
<meta name="viewport" content="width=device-width,initial-scale=1.0">
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
media
@media only screen and (min-width: 600px) { <!--注意此处and 后面为空格 min-width:600px后面没有;分号-->
div {background-color: green;}
}
@media only screen and (min-width: 768px) { <!--min-width页面最小可见区域宽度-->
div {background-color: blue;}
}
该代码在页面最小可见区域宽度为600px 时div的背景颜色变为绿色,为768px 时div的背景颜色变为绿色 记住大的宽度写在下面,不然将会被覆盖(上述例子将medi的位置颠倒背景颜色将一直为绿色)。
//例1
<link media="(min-width:500px)" rel="stylesheet" type="text/css" href="one.css">
<link media="(max-width:500px)" rel="stylesheet" type="text/css" href="two.css">
<!--注意此处的min-width:500px 后面没有分号;-->
//例2
<link media="(max-width:500px) and (min-width:400px)" rel="stylesheet" type="text/css" href="two.css">
<!--注意and 前后都必须用空格分隔开-->
上面例子可以对于不同的端口引用不同的css样式
例1:在宽度大于500px的时候应用 one.css样式,小于500px的时候应用 two.css样式。
例2:在宽度大于400px且小于500px的时候应用 two.css样式。
em/rem
要使得网页根据屏幕调整布局,所以不能使用绝对宽度布局,也不能使用绝对宽度的元素。
可以使用百分比宽度代替
字体只能使用相对大小(em)或者高清方案(rem)rem不局限于字体大小,前面的宽度width也可以使用,代替百分比。
rem 只是相对于根元素html
的font-size(就是参照你html的font-size),只需要设置根元素的font-size,其他元素使用rem单位设置成对应的比例就可以了。
html{font-size:60px;} //!!!
@media only screen and (min-width: 600px){
div{font-size:.25rem}
}
@media only screen and (min-width:768px){
div{font-size:.5rem}
}
上面这个例子可以根据屏幕的变化,改变div字体的大小。
图片处理
对于文章里插入图片可以通过css 样式max-width来控制图片的最大宽度
.wrap img{
max-width:100%;
height:auto;
}
上面的例子:class为wrap内的图片会根据wrap的宽度改变已达到等宽扩充,height为auto的设置是为了保证图片原始的高宽比例,以至于图片不会失真。