整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
用方案
1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）
2、通过媒体查询分别设置每个屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可换算为 rem
优：有一定适用性，换算也较为简单。
劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法适配。
网易方案
1、拿到设计稿除以 100，得到宽度 rem 值
2、通过给 html 的 style 设置 font-size，把 1 里面得到的宽度 rem 值代入x document.documentElement.style.fontSize =document.documentElement.clientWidth / x + ‘px‘;
3、设计稿 px/100 即可换算为 rem
优：通过动态根 font-size 来做适配，基本无兼容性问题，适配较为精准，换算简便。
劣：无 viewport 缩放，且针对 iPhone 的 Retina 屏没有做适配，导致对一些手机的适配不是很到位。
手淘方案
1、拿到设计稿除以 10，得到 font-size 基准值
2、引入 flexible
3、不要设置 meta 的 viewport 缩放值
4、设计稿 px/ font-size 基准值，即可换算为 rem
优：通过动态根 font-size、viewpor、dpr 来做适配，无兼容性问题，适配精准。
劣：需要根据设计稿进行基准值换算，在不使用 sublime text 编辑器插件开发时，单位计算复杂。
em 适配方法是一种常用的响应式布局方法，它通过使用 rem 单位来设计页面布局，使得当屏幕大小变化时，页面布局能够自适应调整。
要计算 HTML 根字号及适配方案，可以按照以下步骤进行:
1.确定根字号：根字号是指页面上第一个非标题元素的宽度，通常是一个固定的数字，例如 100 或 200。可以通过调试和观察页面布局来确定根字号。
2.计算布局宽度：通过使用 width: 100%; 来设置根元素的宽度，使其占据整个页面的宽度。
3.确定适配方案：根据根字号和屏幕大小，可以选择不同的适配方案。例如，当屏幕宽度小于等于 750px 时，可以使用 100% 宽度的根元素;当屏幕宽度大于 750px 时，可以使用 750px 宽度的根元素。
4.编写 CSS 样式：根据适配方案，编写相应的 CSS 样式，控制根元素的宽度和布局。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 确定根字号 */
body {
font-size: 16px;
}
/* 计算布局宽度 */
@media screen and (max-width: 750px) {
body {
font-size: 100px;
width: 100%;
}
}
/* 适配方案：当屏幕宽度大于 750px 时，使用 750px 宽度的根元素 */
@media screen and (min-width: 751px) {
body {
font-size: 75px;
width: 750px;
}
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
在上面的代码中，@media 查询被用来根据屏幕大小来选择不同的适配方案。当屏幕宽度小于等于 750px 时，使用 100% 宽度的根元素;当屏幕宽度大于 750px 时，使用 750px 宽度的根元素。同时，body 元素的 font-size 被定义为 16px，作为根元素的参考大小。
需要注意的是，rem 适配方法只适用于文本内容为主的页面，对于图片、图标等非文本元素，应该根据实际情况选择不同的适配方案。
1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）
2、通过媒体查询分别设置每个屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可换算为 rem
优：有一定适用性，换算也较为简单
劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法适配
#挑战30天在头条写日记#
以往的页面布局中，可能我们使用像素（px）这个长度单位是最多的。但是随着Web技术的发展，出现了移动端页面，因此需要找寻既适应PC端又需要在移动端完美展示的解决方案，这样对于网页的设计就有了更高的要求，于是响应式布局也出现了，它的出现使得我们设计的网页可以适配多种设备，例如：电脑、手机、平板等等。如果没有合理的使用长度单位，那么不同设备之间的展示效果会完全不一样，甚至可能会造成页面错乱，所以，也深入的了解了一下相关的长度单位在页面中的作用，在这里做了一下总结。
首先，我从这次的学习中了解到CSS单位中的长度单位分为：
具体情况如下：
CSS长度单位
下面，我根据我学到的内容，我梳理了一下重点的几个知识点（px，em，rem，vw，vh），现在给大家分享一下。
常用的一些CSS长度单位：
了解上述的基本单位，下面是我学习中的写的一些demo，我把效果分享给大家看看。
html结构如下：
<div>
Hello World!
<br>
<span>你好，世界！</span>
</div>css如下：
div {
font-size: 16px;
}
div span {
font-size: 24px;
}div内的元素设置了字体大小为16px，span里的字体设置了24px，span标签的样式把父级的div字号大小给覆盖了。从这个案例我们也可以得出一个结论：字号是可以从父级继承的。
通常在浏览器中，浏览器的默认字体大小为16px，即：1em = 16px，那么，根据该值，可以推算出0.75em = 12px，0.625em = 10px。
html结构如下：
<h2>Hello World!
<br>
<span>PHP是世界上最好的语言！</span>
</h2>css如下：
<style>
html {
font-size: 1.25em;
}
h2 {
font-size: 1.5rem;
}
h2 span {
font-size: 1rem;
}
</style>html根元素字号
上面的案例设置了html根元素的字号大小为1.25em，此时可以换算出当前情况下1em的实际大小为：1.25em * 16 = 20px，因此，1em = 20px，从上面的图例中的控制台里也可以看到，确实是20px，那么h2字号的大小应该是：1.5 * 20 = 30px，效果如图：
1.25em
h2下的span标签的字号大小应该是1em * 20 = 20px。
1em
当前在html根元素设置了字号（font-size），可以看做是一个固定值，它后面的所有子元素如果想用html的字号，就没有办法再使用em了，因为em它是可以被继承的，从MDN上我们也可以了解到，它的子元素的字体大小是相对于父级元素而言的，此时我们可以使用一个新的属性来来使用html根元素的字号值，这个属性即：rem。
同样，我们还是先设置一个根元素的字号，现有如下的html结构：
<div>
Hello World!
<br>
<span>你好，世界！</span>
</div>css如下：
<style>
html {
font-size: 0.75em;
}
div {
font-size: 2rem;
}
div span {
font-size: 3rem;
}
</style>在前面，我们已经知道了，浏览器的默认字体大小是16px，此时声明了根元素的font-size为0.75em，那么0.75 * 16 = 12px，此时1em = 12px = 1rem，设置完根元素的字号之后，后面的字体就可以直接使用rem即可。
根据上面的div字号大小，我们可以知道“Hello World”的字号大小为：2rem * 12 = 24px，效果图如下：
“Hello World”的字号大小
那么，span内部的字号大小为：3rem * 12 = 36px，效果图如下：
span内部的字号大小
由这个案例就可以知道，rem的字号大小都是相对于根元素(html)的。
同时，还有一点需要注意的是，在使用边框(border)属性时，不要用rem/em，一定要用px，否则边框的大小也会随着根元素字号的改变而变粗或变细。
以上就是我学习em/rem/vh/vw这些知识当中的案例，搞清楚这些属性的区别，对于以后学习响应式布局，会方便很多。
*请认真填写需求信息，我们会在24小时内与您取得联系。
