码迷,mamicode.com
首页 > 移动开发 > 详细

移动端布局rem em

时间:2018-02-24 23:14:28      阅读:417      评论:0      收藏:0      [点我收藏+]

标签:content   document   其他属性   统一   显示   nts   body   down   缺点   

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">

移动端布局rem em

标签:content   document   其他属性   统一   显示   nts   body   down   缺点   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!