移动端布局rem em

1、概念

em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小

rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小

优缺点:em就是为字体和行高而生的,有些时候子元素字体就应该相对于父元素,元素行高就应该相对于字体大小;而rem的有点在于统一的参考系

2、Rem布局原理

rem布局的本质是等比缩放,一般是基于宽度

3、比Rem更好的方案

vw —— 视口宽度的 1/100;vh —— 视口高度的 1/100

4、Rem的问题

1、首先是字体的问题,字体大小并不能使用rem,字体的大小和字体宽度,并不成线性关系,所以字体大小不能使用rem;由于设置了根元素字体的大小,会影响所有没有设置字体大小的元素,因为字体大小是会继承的

  • 解决方案:在body中修正
  • 追问 : 字体的大小如何实现响应式

通过修改body字体的大小来实现,同时所有设置字体大小的地方都是用em单位,对就是em,因为只有em才能实现,同步变化,我早就说过em就是为字体而生的

@media screen and (min-width: 320px) {
    body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    body {font-size: 18px}
}
@media screen and (min-width: 641px) {
    body {font-size: 20px}
}

p {font-size: 1.2em}
p a {font-size: 1.2em}

2、如果用户在PC端浏览,页面过宽怎么办?

一般我们都会设置一个最大宽度,大于这个宽度的话页面居中,两边留白

var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 780 ? clientWidth : 780;
document.documentElement.style.fontSize = clientWidth / 100 + ‘px‘;

设置body的宽度为100rem,并水平居中

body { margin: auto; width: 100rem }

3、如果用户禁用了js怎么破?

首先可以添加noscript标签提示用户

<noscript>开启JavaScript,获得更好的体验</noscript> 

给html添加一个320时的默认字体大小,保证页面可以显示

html {fons-size: 3.2px} 

如果你想要更好的体验,不如添加媒体查询吧

@media screen and (min-width: 320px) {
    html {font-size: 3.2px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    html {font-size: 4.8px}
}
@media screen and (min-width: 641px) {
    html {font-size: 6.4px}
}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

原文地址:https://www.cnblogs.com/chenjinxinlove/p/8467723.html

时间: 2024-10-06 10:38:04

移动端布局rem em的相关文章

移动端布局 rem

/* # 按照宽高比例设定html字体, width=device-width initial-scale=1版 # @pargam win 窗口window对象 # @pargam option{ designWidth: 设计稿宽度,必须 designHeight: 设计稿高度,不传的话则比例按照宽度来计算,可选 designFontSize: 设计稿宽高下用于计算的字体大小,默认20,可选 callback: 字体计算之后的回调函数,可选 } # return Boolean; # ps:

移动端布局,字体使用rem不生效问题

本文参考连接:https://blog.csdn.net/qq_35484341/article/details/78248371 移动端布局是最让我感到头疼的一件事,一直都是逃避的心态,不想面对,但没办法,公司前端就我一个人,所有的问题迟早都要自己解决,所以不得不开始摸索,最快的办法就是看前辈们都是怎么解决的,但是有些办法不一定适合自己,要挨个试,才知道哪个方法好用,这次我就来记录一下移动端布局rem不生效的问题. 众所周知,rem是相对于html元素的font-size大小而言的,而em是相

rem与移动端布局

移动端布局痛点在:兼容各个分辨率的移动设备,同样是手机,iPhone4-iPhoneX分辨率范围就已经很广:如果使用px进行布局,显然会出现问题: 常见的像素单位px,em,rem中,em是相对于父元素font-size的单位,个人认为在使用中,em会比较混乱:rem相对的是根元素.HTML,便于根据屏幕分辨率进行布局: 目前移动端布局采用的方式:  “横向百分比 + 纵向rem”,同时使用flex布局,媒体查询: https://www.cnblogs.com/ysshuai/p/669433

移动端布局之路-----rem布局

rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px. /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势:父元素文字大

移动端网页 rem 自适应布局

(function(doc , win){var DocElement = doc.documentElement;var RsizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';function ResetSize(){var deviceWidth = DocElement.clientWidth;if(!deviceWidth){return false;}DocElement.style.fo

vw结合rem实现移动端布局

继上一篇<媒体查询结合rem实现移动端布局>的改进! 还是以昨天写的页面为例 上一回说到了媒体查询结合rem做移动端布局,步骤如下 首先设置媒体查询,确定html中font-size值的变化 @media all and (max-width:320px){ html{font-size:12px;} } @media all and (min-width:321px) and (max-width:375px){ html{font-size:14px;} } @media all and

移动端布局使用哪种单位比较好?

关于移动端布局使用哪种单位,每个人都有自己习惯使用的单位,这个也只是我个人的一点点浅见. 欢迎大家指点. 很多人在谈到写移动端页面的时候,都觉得很恼火.因为要写n套css样式.然后用媒体查询做适配. 一般这个时候我都表示自己懵懵哒,搞不懂为什么要写这么多套.可能是由于我经验不够,所以看不出来写这么多套有什么深意. 我认为在移动端可以做到适配不同的手机分辨率,如果只是保持整体缩放,没有设计上的差异可以不需要用到`media query`. 下面说说我习惯使用的单位:em,rem,% 1.em em

移动端布局总结

最近做了几个移动端的项目,因为第一次接触移动端的布局,所以踩了几个坑,今天总结一下,有不对的地方欢迎大家提意见. 移动端布局需要考虑为不同分辨率的设备都提供一个出色的使用体验,下面我来总结一下移动端布局的方法. 借助库 比如Bootstrap和MUI都可以实现自适应布局,借助于他们定义好的样式,我们很少需要自己重新写样式,节省了大量的开发时间,推荐使用.在样式不能满足要求的情况下,再自己重写样式. 允许网页宽度自动调整 首先要想自适应必须加入一行viewport标签: <meta name=&quo

精通移动端布局 - 实践篇 -

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选,提炼出来,原本我也想用我匮乏的语言来描述,但是发现别人已经总结的更好了,所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录: 基本概念    物理像素    设备独立像素    CSS 像素    PPI的概念    DPR的概念    缩放的概念    viewPort 的概念    viewport 渲染流程    Meta 标签说明 移动端布局实践    混合方式    REM 方式        响应式        JS自动换