关于移动 web 端屏幕适配(rem)的介绍


当前第2页 返回上一页

1

2

3

4

5

6

7

// 在 less 中

/* 定义变量@r:750/15 */

@r:50rem;

p {

  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。

量得 p 的宽度为 100px,因为在设计稿这样尺寸的屏幕中,1rem = 50px,所以该 p 的 rem 的值为:100/50 rem,即 100/@r。

量得 p 的高度为 200px,因为在设计稿这样尺寸的屏幕中,1rem = 50px,所以该 p 的 rem 的值为:200/50 rem,即 200/@r。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于HTML中rel属性的分析

html页面中meta的作用以及页面的缓存与不缓存设置的解析

以上就是关于移动 web 端屏幕适配(rem)的介绍的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

html5移动端-viewport的详解

基于vue移动端ui框架有哪些?

h5移动端各种各样的列表的制作方法详解(三)

h5移动端各种各样的列表的制作方法(一)

px,em,rem的区别

h5移动端各种各样的列表的制作方法(二)

h5移动端做一个不限个数的通栏按钮的示例代码详解

css中rem有什么特点

html5 移动端自适应布局

js客户端访问的判断

更多相关阅读请进入《移动端》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...