请问用rem布局时，到底是怎么设计的？

Question

按照惯例，先膜拜一下愿意为我们这些无知的前端小白，不嫌麻烦地解答我们的疑问，真的非常感谢。

我想请问有经验的前辈，我这样子用rem单位写布局到底对不对，这个是我今天做的一个练习。一个练习页面

1.我一开始从百度图片那里随便找了一张750X1334的电商图片当做设计稿，

2.然后我设html根元素的font-size：100px, 接下来弄一个版心container类：7.5rem,

3.然后我就直接按照这所谓的750设计稿开始量高度，宽度，比如一个元素300px，我就直接3rem

4.因为我设计了根元素的font-size为100px，结果我发现我每次写一个新的div我都要先把它的font-size重新设置成0.12rem（因为谷歌默认最小是12字体，所以我才设这个值的），如果我不设置的话，里面的元素继承根元素的font-size变的超大！我写到这里我就严重怀疑我绝对是弄错了rem布局的设置了。哪有这样子每次都重新设置过的。

5.最后我布局的时候，我无论字体大小，高宽，边距那些我都全部用rem表示，没有出现一个px。

我知道我这样写肯定是错了，我想知道到底真正的设置是怎样的，希望有前辈能够相助，可以的话，举例子最好，谢谢了！！！

（PS：我已经看过关于rem的相关介绍，什么设计稿其实是页面的2倍，所以量的时候要减一半，我不明白啊，我在写这个练习的时候，如果量的时候减一半，根本就不对啊，(；′⌒`)，搞不懂啊，理解好差啊我。。。）

Answer 1

1、750的设计稿在移动端的实际逻辑宽度应该是375px，所以，量取的300px应该设置1.5rem才是。
2、在body上设置一个默认的font-size：12px可防止问题4的出现
3、rem的用法基本就是，html跟原生设置控制尺寸的font-size，根据默认的750设计稿和375px的逻辑像素款进行换算。根据media witdh 更改相应的html的font-size即可。

问题，发现你的demo的默认font-size是这个区间
[767,*) 100px
[640,767) 85.33px
[480,640) 64px
[440,480) 58.66px
[400,440) 53.33px
[360,400) 48px
[320,360) 42.66px
(*,320) 100px

不是很清楚你这是怎么算出来的，不建议你这么写，这样你在调试的时候是使用365px的宽做调试的。

建议使用
(*,365] 50px
(365,*) 60px
。。。
这样以365-50px的尺寸计算的好处是，750的视觉尺寸，换算成视觉的width就是750/2/50=0.75,这样就不用过多的计算余数了。

以上是我的个人看法

Answer 2

html的font-size 100px即可，如果是10px的话，chrome最小字体12px会导致字体大小不对

Answer 3

基本上没什么问题，除了第四点lz吐槽的文字大小问题，一般来说在reset清除页面默认样式时就会设置到页面的基准字体大小（每个标签），也就是你的页面中最常出现的大小。

此外，设计稿是页面两倍这个看具体情况，因为在手机上有不同屏幕比例的情况，所以至少用个2x图，也就是说切图其实是两倍的高宽，然后设计稿也是两倍的，但是其实按照设计稿的一半大小去做页面。

Answer 4

看看这个[1]: http://www.w3cplus.com/mobile...