html中简述rem布局原理,Html5移动端页面自适应布局详解(阿里rem布局)

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport,通读网上的各类对于viewport的解释以后css

大概viewport能够理解为三种html

1。layout viewport,也就是这个浏览器默认的viewport前端

2。visual viewport, 浏览器可视区域viewportweb

3。 ideal viewport,移动设备的理想viewportchrome

通俗点讲，pc端css中的1px并不会等于移动端，原理很简单，举个例子说浏览器

经过chrome浏览器能够知道，一个Iphone 6 plus是414*736，而pc端的页面动辄几千px以上，因此css中的1px并不等于设备的1pxide

这也就意味着设备的1px等于多个csspx，也就是1px:Npx的关系布局

具体的解释我就很少说了，想要深刻理解，能够跳转post

下面讲怎么设置viewport测试

1

为了达到理想移动设备viewport，能够用meta标签对viewport进行控制

而meta标签内能够有不少的属性，具体以下

width

设置layout viewport  的宽度，为一个正整数，或字符串"width-device"

initial-scale

设置页面的初始缩放值，为一个数字，能够带小数

minimum-scale

容许用户的最小缩放值，为一个数字，能够带小数

maximum-scale

容许用户的最大缩放值，为一个数字，能够带小数

height

设置layout viewport  的高度，这个属性对咱们并不重要，不多使用

user-scalable

是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许

那么要获得ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。由于meta viewport中的width能控制layout viewport的宽度，因此咱们只须要把width设为width-device这个特殊的值就好了

那么经过各大网友的测试，宽度都是竖屏时ideal viewport的宽度

可是这句话并非全部浏览器都兼容的，那么为了使浏览器都有一个ideal viewport，content="initial-scale=1经过这句话使缩放比例为1

ideal viewport的效果就能正常实现了，这里我也是知其然而不知其因此然，具体的内容也能够经过跳转

下面上一个简单的移动端布局

1

2

3

4

5

6

Document

7

8

9 //经过window.screen.width获取屏幕的宽度

10 varoffWidth=window.screen.width/ 30;//这里用宽度/30表示1rem取得的px

11 document.getElementsByTagName("html")[0].style.fontSize=offWidth+ 'px';//把rem的值复制给顶级标签html的font-size

12

13

14 /*偷个懒就直接全局初始化了*/

15

16 *{

17 padding:0;

18 margin:0;

19 }

20 /*布局需求,上下都间隔*/

21 div{

22 margin:0.833333333rem 0;

23 }

24 /*去处a标签的下划线*/

25 a{

26 text-decoration:none;

27 }

28

29 .one{

30 width:30rem;

31 /*100/720*30*/

32 height:4.166666667rem;

33 /*图片宽750,高100*/

34 background:url("./img/head.png");

35 background-size:contain;

36 }

37

38 .two{

39 width:30rem;

40 /*400/720*30*/

41 height:16.6666667rem;

42 /*图片宽750,高400*/

43 background:url("./img/top1.jpg");

44 background-size:contain;

45 }

46

47 .three{

48 width:30rem;

49 height:5.875rem;

50 /*图片宽750,高141*/

51 background:url("./img/top2.jpg");

52 background-size:contain;

53 }

54

55 .four{

56 width:28.33333333rem;

57 height:13.16666667rem;

58 /*图片宽750,高316*/

59 background:url("./img/top3.jpg") no-repeat;

60 background-size:contain;

61 margin-left:0.833333333rem;

62 position:relative;

63 }

64

65 span{

66 position:absolute;

67 display:block;

68 width:8.33333333rem;

69 height:2rem;

70 line-height:2rem;

71 text-align:center;

72 background:#fff;

73 right:0.833333333rem;

74 bottom:0.833333333rem;

75 font-size:0.95833333rem;

76 color:red;

77 cursor:pointer;

78 }

79

80 .five{

81 width:28.33333333rem;

82 height:13.16666667rem;

83 /*图片宽750,高316*/

84 background:url("./img/top4.jpg") no-repeat;

85 background-size:contain;

86 margin-left:0.833333333rem;

87 }

88

89

90

91

92

93