code前端网使用CSS3的rem属性创建响应式页面布局时的要点分析
Rem 实际上不仅可以应用于字体，还可以应用于长度和宽度。接下来我们看一下我创建的一个项目的首页。
演示
由于这个项目，我将最大宽度限制设置为 640px，最小宽度限制为 320px。您可以更改浏览器分辨率或通过手机打开查看效果。不同分辨率之间显示效果基本相似，移动终端之间100%全面。我想这种响应式的效果应该最适合当今移动终端多样化的需求。如果你只制作一些自定义尺寸，如 320、480、340 和 600，那就真的很累了。对于前端开发的学生来说是一种耻辱。但如果用rem来实现，就可以实现自适应，而不需要考虑吸引力的问题。
这种效应也对设计师提出了非常严格的要求。例如，您必须指定设计的默认宽度。我们的设计师是按照640的宽度来设计的，设计图的实际宽度是640*2。这样做的目的是为了在移动终端上高清显示。小图标使用CSS3图标字体，这是一个非常好的事情。
设置对应的响应式HTML制动比例
我们在使用长度单位时通常使用px，但是如果使用上面的响应式样式，则必须使用制动或百分比单位。你可以看我的演示代码。上一篇文章介绍了rem字体设置计算方法：CSS代码复制内容到剪贴板
html{
font-size:62.5%; /* 10÷16=62.5% */
}
body{
字体大小:12px;
字体大小:1.2rem; /* 12÷10=1.2 */
}
p{
字体大小:14px;
font-size:1.4rem;
}
通过设置html的字体大小值来控制全局rem输出。这段代码其实就是这个brake的本质。我已经在我的页面上设置了。下面的代码用于控制字体大小在不同设备上的显示并使其自适应：CSS代码将内容复制到剪贴板
html {
font-size: 62.5%;
}
仅@媒体屏幕且（最小宽度：481px）{
html {
字体大小：94%！重要；
}
}
仅@媒体屏幕（最小宽度： 561px){
html {
字体大小：109%！重要;
}
}
@媒体屏幕和（最小宽度：641px）{
html {
font-size: 125%!important;
}
}
如果您查看上面的代码，您可能会想知道为什么要这样设置。事实上，这是根据很多测试计算出来的。上面的代码如果要转换px，则如下： CSS代码将内容复制到剪贴板
html {
font-size: 62.5%; /* 10÷16=62.5% */
}
@仅限媒体屏幕且（最小宽度：481px）{
html {
字体大小：94%！重要； /* 15.04÷16=94% */
}
}
@media only 屏幕和（最小宽度：561px）{
html {
font-size: 109% !重要; /* 17.44÷16=109% */
}
}
@media-screen 和（最小宽度：641px）{
html {
字体大小：125%！重要; /* 20÷16=125% */
}
}
为边距填充设置刹车
以上展示了如何改变html字体站点在不同分辨率下的百分比值可以通过计算可以得到。如果设计师是按照640的宽度来设计的，在实际开发中我们会按照最大宽度640来切割图片。切割图片时，如果我们要给banner设置边距，则设计图的值会加上10px的距离，我们用640的比例去计算：CSS代码复制内容到剪贴板
margin-top:.5rem; /*10 ÷ 20 = 0.5*/
padding-top:1rem /* 20 ÷ 20 =1 */
以上是设计图上分别以rem为单位计算10px和20px距离的方法。你可以类比一下。如果你的设计图是640设计的，可以用上面的方法。反正每次都以最大值来计算就可以了。
对高宽设置刹车
在实际开发中，估计设置最多的值是高宽值。为了实现每个设备对应的长度，许多开发人员会使用百分比。没有问题，但是在很多场景下使用 rem 实际上比百分比更灵活。我在实际开发中一般只使用大div格式的百分比，一般使用rem来设置元素。例如：CSS代码将内容复制到剪贴板
height:100px; /* 100 ÷ 20 = 5rem;*/
宽度:50px; /* 50 ÷ 20 = 2.5rem;*/
用于边缘设置 rem
我们甚至可以使用 rem 创建边缘，但目前的 Android 手机似乎有一小部分不支持此功能使用制动单元作为边界。在我的开发和测试过程中，我发现更高版本的Android浏览器支持这一点。 ，但是很多低版本不支持这个。是否使用取决于你自己的情况。 CSS代码将内容复制到剪贴板
border:.2rem Solid #cccccc;
需要注意的是：
网页必须在多个终端上链接。传统的字体单位px无法满足要求。考虑使用制动单元
rem是相对于主节点的！
为此，下面的代码，首先将根节点单位设置为10px，然后方便使用rem CSS代码将内容复制到剪贴板
html { font-size: 62.5%; }
body { 字体大小：1.4rem; } /* =14px */
h1 { 字体大小: 2.4rem; } /* =24px */
好在rem ie9 支持
。如果想兼容ie9及以下浏览器，可以使用CSS代码将内容复制到剪贴板
html { font -size: 62.5%; }
body { 字体大小：14px;字体大小：1.4rem； } /* =14px */
h1 {字体大小：24px;字体大小：2.4rem； /* =24px */
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。