css 默认样式重置
1 @charset "utf-8"; 2 *{margin:0;padding:0;} 3 img {border:none; display:block;} 4 em,i{ font-style:normal;} 5 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:"微软雅黑"; } 6 table { border-collapse: collapse; border-spacing: 0;} 7 h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; } 8 ol, ul, li, dl, dt, dd { list-style: none; } 9 input, button, textarea, checkbox, select, radio, form { vertical-align: top; } 10 a{ color: #000; text-decoration: none; } 11 a:link, a:visited { text-decoration: none; } 12 a:hover{color:#cd0200;text-decoration:underline} 13 input[type="submit"], input[type="reset"], input[type="button"], button { 14 -webkit-appearance: none; 15 } 16 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
1 body{ 2 display:flex; 3 flex-direction:column; 4 height:100%; 5 } 6 7 /* head */ 8 header{ 9 height:1rem; 10 background:#0dc441; 11 display:flex; 12 justify-content:center; 13 align-items: center; 14 } 15 header span{ 16 display:block; 17 1.5rem; 18 height:.5rem; 19 background:#64d985; 20 text-align:center; 21 line-height:.5rem; 22 color:#fff; 23 font-size:16px; 24 } 25 header span:nth-child(1){ 26 border-radius:1rem 0 0 1rem 27 } 28 header span:nth-child(2){ 29 border-radius: 0 1rem 1rem 0; 30 background:#3dd067; 31 color:#a3e9b7; 32 } 33 34 /* nav */ 35 nav{ 36 height:1rem; 37 border-bottom:1px solid #d9d9d9; 38 display:flex; 39 } 40 nav li{ 41 height:1rem; 42 flex:1; 43 text-align:center; 44 line-height:1rem; 45 font-size:14px; 46 color:#666; 47 } 48 nav .active{ 49 border-bottom:2px solid #0dc441; 50 color:#0dc441; 51 } 52 .made{ 53 flex:1; 54 overflow:auto; 55 } 56 article{ 57 display:flex; 58 flex-wrap:wrap; 59 justify-content:space-between; 60 } 61 article figure{ 62 49.2%; 63 border:1px solid #e5e5e5; 64 margin-bottom:0.42rem; 65 } 66 article figure img{ 67 100%; 68 } 69 /* footer */ 70 footer{ 71 height:1rem; 72 background:pink; 73 }
html
1 <body> 2 <!-- head --> 3 <header> 4 <span>孙行者</span> 5 <span>者行孙</span> 6 </header> 7 <!-- nav --> 8 <nav> 9 <li>孙悟空</li> 10 <li class="active">猪八戒</li> 11 <li>沙和尚</li> 12 </nav> 13 <!-- section --> 14 <div class="made"> 15 <article> 16 <figure> 17 <img src="5.jpg" alt=""> 18 </figure> 19 <figure> 20 <img src="5.jpg" alt=""> 21 </figure> 22 <figure> 23 <img src="5.jpg" alt=""> 24 </figure> 25 <figure> 26 <img src="5.jpg" alt=""> 27 </figure> 28 <figure> 29 <img src="5.jpg" alt=""> 30 </figure> 31 <figure> 32 <img src="5.jpg" alt=""> 33 </figure> 34 <figure> 35 <img src="5.jpg" alt=""> 36 </figure> 37 <figure> 38 <img src="5.jpg" alt=""> 39 </figure> 40 <figure> 41 <img src="5.jpg" alt=""> 42 </figure> 43 <figure> 44 <img src="5.jpg" alt=""> 45 </figure> 46 <figure> 47 <img src="5.jpg" alt=""> 48 </figure> 49 <figure> 50 <img src="5.jpg" alt=""> 51 </figure> 52 <figure> 53 <img src="5.jpg" alt=""> 54 </figure> 55 <figure> 56 <img src="5.jpg" alt=""> 57 </figure> 58 </article> 59 </div> 60 <!-- footer --> 61 <footer> 62 63 </footer> 64 </body> 65 </html>
