css meta自适应,自适应网页

viewport

宽度

{

width: xx%;

width:auto;

max-width: 90vw;

max-height: 90vh;

}

字体大小

html {

font-size: 62.5%; //10 ÷ 16 × 100% = 62.5%

}

body{

font-size: 1.6em;

font-szie:1.6rem; //css3

}

html { font-size:100.01%; }

body { font-size:1em; }

px em rem 转换工具

加载CSS

@media screen and ( max-width:400px ) {...} //当浏览器的可视区域小于400px

media="screen and (min-width: 400px) and (max-width: 600px)"

href="smallScreen.css" />

@import url("tinyScreen.css") screen and (max-width: 400px);

图片的自适应

img { max-width: 100%;}

img { width: 100%; } /*for IE8*/

js自动设置meta

测试

(function() {

// deicePixelRatio ：设备像素

var scale = 1 / devicePixelRatio;

//设置meta 压缩界面 模拟设备的高分辨率

document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

//debounce 为节流函数，自己实现。或者引入underscore即可。

var reSize = _.debounce(function() {

var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;

//按照640像素下字体为100px的标准来，得到一个字体缩放比例值 6.4

document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

}, 50);

window.onresize = reSize;

})();

html {

height: 100%;

width: 100%;

overflow: hidden;

font-size: 16px;

}

div {

height: 0.5rem;

widows: 0.5rem;

border: 0.01rem solid #19a39e;

}

flex布局

flex:0 1 auto|%|px //flex-grow flex-shrink flex-basis

圣杯布局

.wrapper {

display: flex;

flex-direction: column;

}

header,

footer {

flex: 1;

}

.content {

display: flex;

flex: 1;

}

.main{

flex: 1;

}

.aside{

/* 两个边栏的宽度设为12em */

flex: 0 0 12em;

}

.aside-1{

/* 导航放到最左边 */

order: -1;

}

@media (max-width: 768px) {

.content {

flex-direction: column;

flex: 1;

}

.aside,

.wrapper{

flex: auto;

}

}

Header

Main

Aside 1

Aside 2

Footer