移动布局+百分比布局+em+rem+动态设置根元素fontSize

流式布局

移动端大量使用CSS3盒子模型 box-sizing

box-sizing: border-box; 很重要

移动端特殊样式

如何动态设置html的 font-size

开始

js动态设置代码，这里style里面就不用写 html{font-size:100px;}

这样应该就可以完成自适应了，记得编码时不要用 px，而是用 px / 100 后的值，单位是rem。比如，当手机是iphone6时，设备独立像素是375px， document.documentElement.clientWidth / 3.75 的值是100 ，此时 html的fontSize 是100px，如果设计师给的背景图片宽度是以iphone6为基础（375px）设计的（且图片宽度占满全屏—375px），那么我们只要写img 的宽度为 width: 3.75rem; , 3.75rem是通过 375px 除以html里fontSize的值（100px）得出的。

当手机是iphone6 Plus时，设备独立像素是414px， document.documentElement.clientWidth / 3.75 的值是 110.4，此时 html的fontSize 是110.4px，如果设计师给的背景图片宽度是以iphone6 Plus为基础（414px）设计的（且图片宽度占满全屏—414px），那么我们只要写img 的宽度为 width: 3.75rem; , 3.75rem是通过 414px 除以html里fontSize的值（110.4px）得出的。
注意这里也是 3.75rem；

所以当我们确定手机只用 iphone6时，可以在 html 中写固定的 font-size 等于100px，然后用设计师给的图片等元素的实际px除以100计算出最终的rem，但是这种固定值的情况一般值出现在PC端开发，如PC端html的font-size 会设置为 16px好像。但是在移动端就得使用js动态计算了
计算js代码如下

继续

重点：如果让html元素字体的大小，恒等于屏幕宽度的 1/100，那1rem 和 1x 就等价了

推导

按照前面所述，如果只适配iphone6，html的font-size 设置为 100px，计算时直接用设计师给的元素的 px 除以 100 得到 xxxrem；
所以，如果iphone6 设置一个100px，等价于设置多少个 vw呢？
思考提示：
iphone6 ： 375px 设备独立像素占 100vw
则有
375px / 100vw = 100px/ ?
计算得？ = 26.667vw
故
直接在 html中填写 26.667vw可以达到和编码js 同样子的效果，之后写CSS时直接使用设计师的px除以100 即可得到想要的最终rem结果

总结：
结果就是html 设置 font-size 为 26.667vw 即可
其实这里的26.667vw就是指 100px;(iphone 6)

然后给个demo 如下

别忘了设置

demo（iphone6 ）中样式里面 .box h2 { font-size: 0.2rem; width: 3rem;},
此时
.box h2 的宽 width是 3rem，即3 * 100 = 300px;
.box h2 的font-size 是0.2rem ,是 20.0002px约等于 20px，即 0.2 * 100 = 20px;
如果这里不手动写 font-size ： 0.2rem; 则文字的 font-size默认使用根元素的font-size大小，即 100.001px约等于 100px，这里的小数应该是 html{ font-size: 26.667vw} 导致的

在最后问一下图片处理：问题来自 https://www.cnblogs.com/jiangzilong/p/6700023.html
手机屏幕变大但是加载的图片不会变大，一般不需要一起变大吧？？？
iphone6Plus dpr 为3

【在非标准屏幕上以同样大小显示同一张图片时,就需要缩放图片大小】咋解决呢，不至于写js动态去适配所以设备吧？？？？？？？？

rem是如何实现自适应布局的？
http://caibaojian.com/web-app-rem.html

html {font-size : 20px;
}
@media only screen and (min-width: 401px){html {font-size: 25px !important;}
}
@media only screen and (min-width: 428px){html {font-size: 26.75px !important;}
}
@media only screen and (min-width: 481px){html {font-size: 30px !important; }
}
@media only screen and (min-width: 569px){html {font-size: 35px !important; }
}
@media only screen and (min-width: 641px){html {font-size: 40px !important; }
}

移动布局+百分比布局+em+rem+动态设置根元素fontSize相关推荐

html设置根rem,经过js动态设置根元素的rem方案
rem目前是响应式开发移动端一个很重要也是经常使用的一个元素,可是在网上看的各类文章都会超级懵逼.因此我在下面给出两个方案,也列举出使用方法,让你们一目了然.前提是设计稿以750为准.其中测试的设计稿 ...
像素，百分比，em,rem,颜色单位的相关讲解。
像素和百分比. (一)像素首先你电脑的屏幕(显示屏)实际上是一个一个的小点点,也就是由一个一个像素构成,不同屏幕的像素大小是不同的,并且像素越小就越清晰也就是说,同样的200像素在不同的设备上显示 ...
java中的布局文件改成,Android 动态设置布局文件的exception
错误信息: java.lang.ClassCastException: android.widget.LinearLayout$LayoutParams cannot be cast to andro ...
动态设置html字号,动态设置html的font-size值（适配文字大小）
PC端 (function () { function setRootFontSize() { let rem, rootWidth; let rootHtml = document.document ...
动态设置根节点字体大小
<script> function setRem(){ var ui_w=" "; //获取屏幕的宽度 var clieniwdth =document.documen ...
自适应网页(响应式布局)+弹性布局
1.自适应网页 1.声明viewport元标签 <meta name="viewport" content="width=device-width,initial- ...
css rem 大屏开发_px/em/rem的区别与应用
1px有多大? 我们先了解几个概念: 关键概念设备像素:设备屏幕实际拥有的像素点一般来说:宽度方向有1920个像素点,长度方向有1080个像素点.逻辑像素:CSS 的像素单位(就是我们这次要讨论的c ...
html pc vw过大,细说em/rem/vh/vw与响应式布局
细说em/rem/vh/vw与响应式布局一.em,rem的原理与应用场景 CSS单位中的长度单位分为:相对长度.绝对长度,如下表: 引用MDN上的两句话: em:在 font-size 中使用是相对 ...
移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...

移动布局+百分比布局+em+rem+动态设置根元素fontSize

移动布局+百分比布局+em+rem+动态设置根元素fontSize相关推荐

最新文章

热门文章