分栏：
媒体查询：
单位：
案例1：
案例2：
案例3：
盒子模型：
案例1：
案例2：
media查询：
flexible脚本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
column-count: 4;/* 栏数 列数*/
column-width: 200px;/*栏宽 列宽*/
columns: 200px 4;/*缩写*/
/* 屏幕 >=800px 按栏数
<800 按栏宽 */
column-gap: 20px;/*列间距 栏间距*/
column-rule: 1px solid #f00;
}
</style>
</head>
<body>
<p>
放文字
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*默认>1000px*/
.box {
width: 300px;
height: 300px;
background-color: #FF0000;
transition: 1s;
}
@media screen and (max-width:1000px) {
/*501-1000*/
.box {
width: 200px;
height: 200px;
background-color: #0f0;
}
}
@media screen and (max-width:500px) {
/*<=500*/
.box {
width: 50px;
height: 50px;
background-color: #00f;
}
}
/*默认小于500*/
/*.box {
width: 500px;
height: 500px;
background-color: #FF0000;
transition: 1s;
}
@media screen and (min-width:500px) {
/*500-799*/
/*.box {
width: 50px;
height: 50px;
background-color: #00f;
}
}
@media screen and (min-width:800px) {
/*>800px*/
/*.box {
width: 200px;
height: 200px;
background-color: #0f0;
}
}*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
案例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*浏览器默认1em=16px*/
.box{
font-size: 12px;
}
.box span{
font-size: 1em;
}
</style>
/*em 受当前字号大小的影响*/
/* rem r:rood 根*/
</head>
<body>
<div class="box">
hello word
<span>hello word</span>
</div>
</body>
</html>
案例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*浏览器默认1em=16px*/
.box{
font-size: 12px;
}
.box span{
font-size: 1em;
}
</style>
/*em 受当前字号大小的影响*/
/* rem r:rood 根*/
</head>
<body>
<div class="box">
hello word
<span>hello word</span>
</div>
</body>
</html>
案例3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@media screen and (max-width:1200px){
html{
font-size: 150px;
}
}
@media screen and (max-width:800px){
html{
font-size: 100px;
}
}
@media screen and (max-width:500px){
html{
font-size: 50px;
}
}
.box{
width: 1rem;
height: 1rem;
background-color: #00FF00;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
案例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: 5px solid #00FF00;
background-color: #FF0000;
/*box-sizing: content-box;/*内容盒，标准盒*/
box-sizing: border-box;/*怪异盒模型*/
}
/*标准盒模型
width,height是内容content区域的大小
盒子大小=width+padding+border*/
/*怪异盒模型 ie盒
width，height是 盒子大小*/
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
案例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 100px;
background-color: #FF0000;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
@media only screen and (min-width: 1080px),
only screen and (min-device-width:1080px) {
html,
body {
font-size: 168.75px;
}
}
@media only screen and (max-width: 1080px),
only screen and (max-device-width:1080px) {
html,
body {
font-size: 168.75px;
}
}
@media only screen and (max-width: 960px),
only screen and (max-device-width:960px) {
html,
body {
font-size: 150px;
}
}
@media only screen and (max-width: 800px),
only screen and (max-device-width:800px) {
html,
body {
font-size: 125px;
}
}
@media only screen and (max-width: 720px),
only screen and (max-device-width:720px) {
html,
body {
font-size: 112.5px;
}
}
@media only screen and (max-width: 640px),
only screen and (max-device-width:640px) {
html,
body {
font-size: 100px;
}
}
@media only screen and (max-width: 600px),
only screen and (max-device-width:600px) {
html,
body {
font-size: 93.75px;
}
}
@media only screen and (max-width: 540px),
only screen and (max-device-width:540px) {
html,
body {
font-size: 84.375px;
}
}
@media only screen and (max-width: 480px),
only screen and (max-device-width:480px) {
html,
body {
font-size: 75px;
}
}
@media only screen and (max-width: 414px),
only screen and (max-device-width:414px) {
html,
body {
font-size: 64.6875px;
}
}
@media only screen and (max-width: 400px),
only screen and (max-device-width:400px) {
html,
body {
font-size: 62.5px;
}
}
@media only screen and (max-width: 375px),
only screen and (max-device-width:375px) {
html,
body {
font-size: 58.59375px;
}
}
@media only screen and (max-width: 360px),
only screen and (max-device-width:360px) {
html,
body {
font-size: 56.25px;
}
}
@media only screen and (max-width: 320px),
only screen and (max-device-width:320px) {
html,
body {
font-size: 50px;
}
}
@media only screen and (max-width: 240px),
only screen and (max-device-width:240px) {
html,
body {
font-size: 37.5px;
}
}
//引入该flexible.min.js
! function(e, t) {
function n() {
var n = l.getBoundingClientRect().width;
t = t || 540, n > t && (n = t);
var i = 100 * n / e;
r.innerHTML = "html{font-size:" + i + "px;}"
}
var i, d = document,
o = window,
l = d.documentElement,
r = document.createElement("style");
if (l.firstElementChild) l.firstElementChild.appendChild(r);
else {
var a = d.createElement("div");
a.appendChild(r), d.write(a.innerHTML), a = null
}
n(), o.addEventListener("resize", function() {
clearTimeout(i), i = setTimeout(n, 300)
}, !1), o.addEventListener("pageshow", function(e) {
e.persisted && (clearTimeout(i), i = setTimeout(n, 300))
}, !1), "complete" === d.readyState ? d.body.style.fontSize = "16px" : d.addEventListener("DOMContentLoaded",
function(e) {
d.body.style.fontSize = "16px"
}, !1)
}(640, 640);
/*根据屏幕分辨率调节最后一个值*/
