css样式重置 移动端适配
程序员文章站
2022-06-07 11:25:10
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, o ......
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样式重置
移动端适配静态小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 }
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>