通过js动态设置根元素的rem方案

Juven 发布于2019-08-21 14:53 / 1237人阅读

摘要：方案二获取元素判断是屏幕旋转还是设置的，随着的改变而改变。以上两种方案均为通过动态设置的根元素的的值来达到响应式的效果。原文链接通过动态设置根元素的方案

rem目前是响应式开发移动端一个很重要也是常用的一个元素，但是在网上看的各种文章都会超级懵逼。所以我在下面给出两个方案，也列举出使用方法，让大家一目了然。前提是设计稿以750为准。其中测试的设计稿中标注此div的width:750px;height:200px;

方案一：

设计稿中标注此div的width:750px;height:200px;
换算为rem,即为width:18.75rem,height:5rem;
此时 1rem = 40px;将设计稿标注的宽高除以40即可得到rem的值。


    此时在iPhone6上测试，width:375px，也即width:100%。

方案二：

设计稿中标注此div的width:750px;height:200px;
换算为rem,即为width:37.5rem,height:10rem;
此时 1rem = 20px;将设计稿标注的宽高除以20即可得到rem的值。


    test

以上两种方案均为通过js动态设置html的根元素的font-size的值来达到响应式的效果。

最后一个为手淘的方案：

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
原文链接：通过js动态设置根元素的rem方案

GPU云服务器云服务器 js动态rem js 设置元素的颜色通过js和元素赋值 js 动态增加元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88053.html

通过js动态设置根元素的rem方案

摘要：方案二获取元素判断是屏幕旋转还是设置的，随着的改变而改变。以上两种方案均为通过动态设置的根元素的的值来达到响应式的效果。原文链接通过动态设置根元素的方案 rem目前是响应式开发移动端一个很重要也是常用的一个元素，但是在网上看的各种文章都会超级懵逼。所以我在下面给出两个方案，也列举出使用方法，让大家一目了然。前提是设计稿以750为准。其中测试的设计稿中标注此div的width:750px...

zhangfaliang 2019-08-30 13:14 评论0 收藏0
再谈移动端适配和点5像素的由来

摘要：再谈移动端适配百分比解决方案的缺点在我们的项目中大量的使用百分比来解决页面在宽度上的自适应，其实在高度上并没有很好的自适应。前言这篇文章的内容如题目一样，主要分为两个部分，谈谈业内主流的移动端适配解决方案点5像素的由来和实现方法建议在读这篇文章的时候先读下这篇文章《高清屏概念解析与检测设备像素比的方法_20161005》，因为这些文章涉及的很多概念在这篇文章中都会提到。 ...

lordharrd 2019-08-20 11:31 评论0 收藏0
移动端网页怎么做？

摘要：移动端网页最大的特点是什么自适应不同尺寸的屏幕高大上的叫法响应式知道了自适应网页怎么做岂不是能很好解决问题了那么自适应网页怎么做呢网上关于这方面的文章有很多，我简单的整理一下。移动端网页最大的特点是什么？自适应不同尺寸的屏幕！高大上的叫法:响应式！知道了自适应网页怎么做岂不是能很好解决问题了？那么自适应网页怎么做呢？网上关于这方面的文章有很多，我简单的整理一下。一、 HTML设置 ...

luoyibu 2019-08-20 18:34 评论0 收藏0