html重置css样式,css样式重置 移动端适配

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