摘要:前言最近整理了一下以前学习前端的笔记,发现自己对移动端屏幕适配这一块并没有真正理解,只是会用。接下来,把自己的一些对移动端屏幕适配的思考记录下来。量得的高度为,因为在设计稿这样尺寸的屏幕中,,所以该的的值为,即。
前言
最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用。
接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来。
rem 表示根元素()的 font-size 的大小。即如果根元素的 font-size 大小为 14px,则 1rem = 14px
rem 适配移动 web 端 适配效果在不同尺寸的屏幕下,同一个元素的大小看起来不是一样大的,但是它们所占屏幕宽度的比例是一样的。
代码// 在 html 文件的 head 标签中
// 在 less 中 /* 定义变量@r:750/15 */ @r:50rem; div { width: 100/@r; height: 200/@r; }javascript 代码
首先,我们将屏幕的 1/15 大小(px)复制给 html 标签的 font-size 属性。此时,在任何尺寸的屏幕上,屏幕尺寸(px)的 1/15 px 都等于 1rem 的大小。即:在任何尺寸的屏幕上,只要给元素设置值相同的 rem,则在所有尺寸的屏幕上该元素所占屏幕宽度的比例是一样的,所占比例一样,就适配了所有尺寸的屏幕。
less 代码现在只需要将设计稿中元素的 px 单位转换为 rem 单位。
所以,这个时候,我们可以把设计稿也当成一个具有一定尺寸的手机屏幕。
在我这个例子中,设计稿的宽度为 750px。
所以,750/15 = 50px,即在设计稿这样尺寸的手机屏幕中,1rem = 50px。
然后,在 less 代码中,我们定义一个变量 @r。
量得 div 的宽度为 100px,因为在设计稿这样尺寸的屏幕中,1rem = 50px,所以该 div 的 rem 的值为:100/50 rem,即 100/@r。
量得 div 的高度为 200px,因为在设计稿这样尺寸的屏幕中,1rem = 50px,所以该 div 的 rem 的值为:200/50 rem,即 200/@r。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95672.html
摘要:前言最近整理了一下以前学习前端的笔记,发现自己对移动端屏幕适配这一块并没有真正理解,只是会用。接下来,把自己的一些对移动端屏幕适配的思考记录下来。量得的高度为,因为在设计稿这样尺寸的屏幕中,,所以该的的值为,即。 前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用。接下来,把自己的一些对移动 web 端屏幕适配(rem)的...
摘要:前言最近整理了一下以前学习前端的笔记,发现自己对移动端屏幕适配这一块并没有真正理解,只是会用。接下来,把自己的一些对移动端屏幕适配的思考记录下来。量得的高度为,因为在设计稿这样尺寸的屏幕中,,所以该的的值为,即。 前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用。接下来,把自己的一些对移动 web 端屏幕适配(rem)的...
摘要:并且除了常用的端,还要考虑微信端,或者是端。所以我们要有一套机制,在端上走的代码,在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目,我总结了以上这些移动开发难点,希望之后的人能少踩点坑,站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多...
摘要:并且除了常用的端,还要考虑微信端,或者是端。所以我们要有一套机制,在端上走的代码,在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目,我总结了以上这些移动开发难点,希望之后的人能少踩点坑,站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多...
阅读 1237·2021-10-08 10:05
阅读 4050·2021-09-22 15:54
阅读 3068·2021-08-27 16:18
阅读 3076·2019-08-30 15:55
阅读 1386·2019-08-29 12:54
阅读 2710·2019-08-26 11:42
阅读 509·2019-08-26 11:39
阅读 2068·2019-08-26 10:11