HTML响应式布局

网页头部设置

"viewport" content="width=device-width, initial-scale=1.0">

字体设置

各大主流浏览器的font-size默认值为 16px，此时 1rem = 16px
把 html 设置成 font-size: 62.5%，此时 1rem = 16px*62.5% = 10px（1:10的比例更便于换算）

html{
  font-size: 62.5%;  
}

body {
  font-size: 1.6rem;
}

rem 是 css3 中新增加的一个单位属性，是相对长度单位。相对于根元素（即html元素） font-size计算值的倍数

单位设置（不要用绝对大小px）

width:auto; / width:100%; / width:100vw; / height:100vh


"font-size:10vw">Hello World
 //随浏览器窗口大小改变，缩放不变
"font-size:1rem">Hello World
 //随浏览器缩放改变，窗口大小不变


"img_girl.jpg" style="max-width:100%; height:auto;">



  "img_smallflower.jpg" media="(max-width: 600px)">
  "img_flowers.jpg" media="(max-width: 1500px)">
  "flowers.jpg">
  "img_smallflower.jpg" alt="Flowers">



.left [
	width:30%; float:left
}
.right {
	width:70%; float:right;
}

媒体查询（@media 与 @media screen）

//在屏幕宽度小于 600px 的时候，会作用大括号里的内容
@media (max-width: 600px) {
	.xxx{
		font-size: 1.4rem;
  	}
}
//当屏幕宽度小于400px的时候，就取消浮动
@media screen and (max-width: 400px) 
{  
	.xxx{
    	float:none;
  	}
}

@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，那么就用@media