HTML
CSS
HTML5
CSS3
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);
移动端适配静态小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 1rem27 }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
2
3
4 孙行者
5 者行孙
6
7
8
9
孙悟空
10 猪八戒
11
沙和尚
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
