css 默认样式重置
@charset "utf-8";
*{margin:0;padding:0;}
img {border:none; display:block;}
em,i{ font-style:normal;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, font { padding: 0; margin: 0; font-family:"微软雅黑"; }
table { border-collapse: collapse; border-spacing: 0;}
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }
ol, ul, li, dl, dt, dd { list-style: none; }
input, button, textarea, checkbox, select, radio, form { vertical-align: top; }
a{ color: #000; text-decoration: none; }
a:link, a:visited { text-decoration: none; }
a:hover{color:#cd0200;text-decoration:underline}
input[type="submit"], input[type="reset"], input[type="button"], button {
-webkit-appearance: none;
}
html,body{height:100%}
移动端适配 rem.js
/**
* YDUI 可伸缩布局方案
* rem计算方式：设计图尺寸px / 100 = 实际rem 例: 100px = 1rem
*/
!function (window) { /* 设计图文档宽度 */
var docWidth = 750; var doc = window.document,
docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var recalc = (function refreshRem () {
var clientWidth = docEl.getBoundingClientRect().width; /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */
docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px'; return refreshRem;
})(); /* 添加倍屏标识，安卓为1 */
docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1); if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
/* 添加IOS标识 */
doc.documentElement.classList.add('ios');
/* IOS8以上给html添加hairline样式，以便特殊处理 */
if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
doc.documentElement.classList.add('hairline');
} if (!doc.addEventListener) return;
window.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false); }(window);
附：一个比较全面的css样式重置 https://blog.csdn.net/qq_35630674/article/details/96484307
移动端适配静态小demo （需引入上方css、rem.js）
css
body{
display:flex;
flex-direction:column;
height:100%;
}
/* head */
header{
height:1rem;
background:#0dc441;
display:flex;
justify-content:center;
align-items: center;
}
header span{
display:block;
width:1.5rem;
height:.5rem;
background:#64d985;
text-align:center;
line-height:.5rem;
color:#fff;
font-size:16px;
}
header span:nth-child(1){
border-radius:1rem 0 0 1rem
}
header span:nth-child(2){
border-radius: 0 1rem 1rem 0;
background:#3dd067;
color:#a3e9b7;
}
/* nav */
nav{
height:1rem;
border-bottom:1px solid #d9d9d9;
display:flex;
}
nav li{
height:1rem;
flex:1;
text-align:center;
line-height:1rem;
font-size:14px;
color:#666;
}
nav .active{
border-bottom:2px solid #0dc441;
color:#0dc441;
}
.made{
flex:1;
overflow:auto;
}
article{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
article figure{
width:49.2%;
border:1px solid #e5e5e5;
margin-bottom:0.42rem;
}
article figure img{
width:100%;
}
/* footer */
footer{
height:1rem;
background:pink;
}
html
<body>
<!-- head -->
<header>
<span>孙行者</span>
<span>者行孙</span>
</header>
<!-- nav -->
<nav>
<li>孙悟空</li>
<li class="active">猪八戒</li>
<li>沙和尚</li>
</nav>
<!-- section -->
<div class="made">
<article>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
<figure>
<img src="5.jpg" alt="">
</figure>
</article>
</div>
<!-- footer -->
<footer> </footer>
</body>
</html>