摘要：方案二获取元素判断是屏幕旋转还是设置的，随着的改变而改变。以上两种方案均为通过动态设置的根元素的的值来达到响应式的效果。原文链接通过动态设置根元素的方案
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的值来达到响应式的效果。
最后一个为手淘的方案：
test
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
原文链接：通过js动态设置根元素的rem方案
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115400.html
摘要：方案二获取元素判断是屏幕旋转还是设置的，随着的改变而改变。以上两种方案均为通过动态设置的根元素的的值来达到响应式的效果。原文链接通过动态设置根元素的方案 rem目前是响应式开发移动端一个很重要也是常用的一个元素，但是在网上看的各种文章都会超级懵逼。所以我在下面给出两个方案，也列举出使用方法，让大家一目了然。前提是设计稿以750为准。其中测试的设计稿中标注此div的width:750px...
摘要：再谈移动端适配百分比解决方案的缺点在我们的项目中大量的使用百分比来解决页面在宽度上的自适应，其实在高度上并没有很好的自适应。 前言 这篇文章的内容如题目一样，主要分为两个部分， 谈谈业内主流的移动端适配解决方案 点5像素的由来和实现方法 建议在读这篇文章的时候先读下这篇文章《高清屏概念解析与检测设备像素比的方法_20161005》，因为这些文章涉及的很多概念在这篇文章中都会提到。 ...
摘要：再谈移动端适配百分比解决方案的缺点在我们的项目中大量的使用百分比来解决页面在宽度上的自适应，其实在高度上并没有很好的自适应。 前言 这篇文章的内容如题目一样，主要分为两个部分， 谈谈业内主流的移动端适配解决方案 点5像素的由来和实现方法 建议在读这篇文章的时候先读下这篇文章《高清屏概念解析与检测设备像素比的方法_20161005》，因为这些文章涉及的很多概念在这篇文章中都会提到。 ...
阅读 1236·2021-11-24 09:38
阅读 2510·2021-11-22 13:54
阅读 838·2021-10-14 09:48
阅读 2149·2021-09-08 09:35
阅读 1447·2019-08-30 15:53
阅读 1048·2019-08-30 13:14
阅读 478·2019-08-30 13:09
阅读 2421·2019-08-30 10:57
