媒体查询案例
https://mediaqueri.es/https://github.com/amfe/lib-f…
https://github.com/amfe/artic…
https://design.google.com/dev… 科学上网
iphone适配
https://www.paintcodeapp.com/…https://www.w3cplus.com/mobil…
https://www.w3cplus.com/css/t…
https://www.w3cplus.com/css3/…
https://www.w3cplus.com/css/v…
http://huodong.m.taobao.com/a…
viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->宽度
{
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
<link rel="stylesheet" type="text/css"
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
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<script type="text/javascript">
(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;
})();
</script>
<style type="text/css">
html {
height: 100%;
width: 100%;
overflow: hidden;
font-size: 16px;
}
div {
height: 0.5rem;
widows: 0.5rem;
border: 0.01rem solid #19a39e;
}
</style>
<body>
<div>
</div>
</body>
</html>flex布局
http://www.ruanyifeng.com/blo…
flex:0 1 auto|%|px //flex-grow flex-shrink flex-basis 圣杯布局
<style>
.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;
}
}
</style>
<div class="wrapper">
<header class="header">Header</header>
<div class="content">
<article class="main">Main</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
</div>
<footer class="footer">Footer</footer>
</div>