首页 > > 网页制作 > css >

css样式重置移动端适配

2019-11-20 16:03:55来源：博客园阅读 ()

css样式重置移动端适配

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     width: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     width:49.2%;
63     border:1px solid #e5e5e5;
64     margin-bottom:0.42rem;
65 }
66 article figure img{
67     width:100%;
68 }
69 /* footer */
70 footer{
71     height:1rem;
72     background:pink;
73 }

View Code

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>