文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

rem如何实现响应式布局

2023-07-05 14:39

关注

这篇文章主要介绍“rem如何实现响应式布局”,在日常操作中,相信很多人在rem如何实现响应式布局问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”rem如何实现响应式布局”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

为什么要使用响应式布局?

因为我们浏览网页的设备屏幕大小不一样,例如有屏幕大的有屏幕小的手机。

16px的字体在iPhone6/7/8上展示效果:

rem如何实现响应式布局

16px的字体在iPad上展示效果:

rem如何实现响应式布局

写移动端H5网页的时候,一般设计稿是以375px也就是iPhone6/7/8的屏幕宽度去设计的,当有用户使用iPad打开的时候效果就会很不好,这显然不是我们想看到的。

如何实现响应式布局呢?

也就是说我们如何在iPad上看到和iPhone6/7/8也差不多的效果呢?没错你肯定想得到,那就是在iPad上的字体太小了,字体要设置得大一点才行。也就是说要实现字体的大小和随着不同屏幕大小的变化。那如何实现在不同屏幕大小下,让字体大小也不一样呢?
那就是利用媒体查询根据不同的屏幕设置各种屏幕宽度下的根元素font-size,然后布局使用rem代替px为长度单位,从而实现响应式布局。

那什么是媒体查询?

developer.mozilla.org/zh-CN/docs/…详细的就不展开了,例如下面这段代码就是指在最大屏幕宽度为374px的设备下,将根元素(html)的字体设置为86px

@media only screen and (max-width: 374px) {    html {        font-size: 86px    }}

那么什么是rem?

rem 是一个相对根元素(html)的长度单位px 是一个绝对长度单位em 同样也是一个相对长度单位,只不过相对的是父元素如上面所设置的将html的font-szie设置为86px, 那么1rem就等于86px。

怎么计算出各个尺寸屏幕下的html元素font-size要设置为多少呢?

这个就得找一下各个屏幕尺寸下的代表机型,然后以其中一个为标准,计算出其他的。一般是以iPhone6/7/8为标准,为什么?因为现在设计稿大多是以iPhone6/7/8的屏幕宽度375px来设置的。
比较小的屏幕:iPhone5屏幕宽度:320px、标准的屏幕:iPhone6/7/8屏幕宽度:375px比较大的屏幕:iPhone6/7/8 Plus屏幕宽度:414px其他更多的比如iPad的屏幕:768px

如果将标准的屏幕宽度设置为100px@media only screen and (min-width: 375px) and (max-width: 413px) {    html {        font-size: 100px    }}那么小屏幕的  100 / x = 375 / 320   x = 85.333...@media only screen and (max-width: 374px) {    html {        font-size: 85px    }}那么大屏幕的  100 / x = 375 / 414  x = 110.4@media only screen and (min-width: 414px) and (max-width: 767px) {    html {        font-size: 110px    }}更大屏幕的  100 / x = 375 / 768  x = 204.8@media only screen and (min-width: 768px) {    html {        font-size: 204px    }}那么将.box的font-size就可以用rem为单位了,在标准的375px屏幕下,1rem就是100px,那么16px,就是 0.16rem。.box {   font-size: 0.16rem;}...<div class="box">    什么是响应式布局?</div>

在iPhone5上展示效果:

rem如何实现响应式布局

在iPhone6/7/8上展示效果:

rem如何实现响应式布局

在iPhone6/7/8 Plus上展示效果:

rem如何实现响应式布局

在iPad上展示效果:

rem如何实现响应式布局

怎么样,是不是在各种尺寸屏幕下看到的效果是差不多的。这就是所谓随着屏幕变化,布局跟着变化的响应式布局实现的思路,同时是基于rem来实现的,rem不仅仅只用于font-size来设置字体大小,如果你只是设置字体变大,盒子的宽度这些还是用px那就会出问题。凡是可以设置数值的属性都可以用rem为单位,例如width、 height...。基于rem的响应式布局是整个页面所有的长度单位都使用rem,这只是实现响应式布局的一种方式。

到此,关于“rem如何实现响应式布局”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯