rem是什么?
rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位。root!!!!!!!!!根节点,也就是html。
例:(下面例子中的根节点是html ,它的字体大小是100px,所以根节点下面的元素所设置的rem,都是1rem=100px。)
rem的初始值是16px,也就是说在没有设置根节点的font-size的时候,1rem=16px
<html>
<head>
<style>
html,body{ font-size: 100px; }
header{ height: 1rem;width: 1rem; }
</style>
</head>
<body></body>
<header></header>
</html>
em是什么
em也是一个相对单位,em单位是根据父元素的字体大小来进行转变的单位。
-
em的值并不是固定的;
- em会继承父级元素的字体大小。
父节点
例:
<header style="font-size:100px;">//父元素的字体大小是100px
<div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px;
</header>
移动端页面开发技巧:
先调查用户的使用情况,总结出大部分用户使用的都是什么设备。
比如:我现在的用户大多使用的是三种手机,我们先将每种手机的分辨率都从网上找出来。
将他们都罗列出来,然后去写媒体查询(因为不同手机分辨率不同,所以用像素的话,会出现显示的相同,举个栗子~ 比如说小朋友吃饭,食堂给小朋友的标配是一个馒头,可是有的小朋友饭量大,有的饭量小,所以会出现不够吃或者吃不了造成浪费。怎么避免这种情况呢,所以食堂大妈想了一个主意体重在50斤~60斤的小盆友可以领取到一个馒头,低于50斤的半个馒头,体重大于60斤的,两个馒头,这三种分配方式。)
我的用户群体大概是这三种设备
设备名称 分辨率 估算字体大小 rem与px转换
iphone5 320568 font-size:12px; 1rem=12px
iphone6 375667 font-size:14px; 1rem=14px
iphone6 Plus 414*736 font-size:16px; 1rem=16px
先取出一个中间的设备来做基本样式的书写
最开始的书写可以根据设计图纸来进行px的书写(也就是先选择好馒头的大小)
优先写出一套模版,然后基于这套模版去写别的设备的媒体查询
在页面中优先写出媒体查询的标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width - viewport设备的宽度
height - viewport设备的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
上面分配好了,按照这种方式写媒体查询
html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始样式必须写在最顶部!!!!如果写在媒体查询底部的话就会覆盖上方的媒体查询(因为是层叠样式表嘛~)
@media screen and (max-width:320px ) {
html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
html{font-size: 16px;}
}
因为上面写好了一套初始模版,因为初始模版都是px的,在文章的开端我们就强调了为什么不能用px了,所以我们要将页面中的px转换成相应的rem值
例:
header{
width:140px;//转化为10rem,因为我们是基于最中间的设备做的,中间设备的font-size:14px,所以140px=10rem。
}
所有用px的高宽全部改成rem这样就完成了,对三种设备的适配
相关推荐
vue-cli3 + vant + postcss-px2rem实现移动端页面
移动端 REM布局 与 Viewport (VW) 布局的实例运用
使用rem单位实现自适应布局,轻松掌握移动端开发。用法简单,比如普遍的设计图宽度为750px,那么在css中设置为7.5rem即可实现宽度100%
仿京东移动端首页布局,包括固定...我们可以通过在不同移动端设备上展示移动端网页,发现固定尺寸布局的不足之处,以及rem适配、vw适配的原理。 其中vw适配的网页css使用的是scss语法,使用了函数、变量、嵌套等语法。
基于Javascript的移动端rem布局的解决方案,小巧灵活的代码,简洁流畅
执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下,文件内容如下 module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >...
移动端rem布局rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 ./js/rem.js中 默认设计稿宽度为640 1rem =100px 可自行修改HOW TO USE设置移动端网页专用的viewport meta,至少需要包含width=...
主要介绍了关于vue利用postcss-pxtorem进行移动端适配的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
rem.js 移动端自适应
rem是css中的长度单位,1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时,你只需要改变根元素font-size值,所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码,根据屏幕宽度改变html的...
Web-前端html+css从入门到精通 206. 移动端rem布局实战流程.zip
浅谈vue 移动端完美适配方案 前言:根据最近做的一个医疗手机端项目总结在移动端,vue怎么在不同屏幕上做根据不同屏幕大小适配 1、适配方案 在本项目中我所使用的vue移动方案是使用amfe-flexible 和 postcss-...
移动端使用rem布局那些事
要想移动端适配 并使用 rem 您需要先看这篇文章,配置好less :right_arrow_selector: 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招。 postcss-pxtorem:...
移动端页面满屏H5自适应方案(采用rem作为单位,设计稿为750 * 1334 或者设计稿为640 * 1334)
主要介绍了CSS3移动端vw+rem不依赖JS实现响应式布局的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
其中有一些不足,还有由于时间原因部分css3动画没有加载完全js方面也稍差了些,但我觉得给rem布局换算比较懵的同学能有个好的参考了
该文档可以引导你一步一步的完成移动端的适配,保姆级教程哦
移动端适配rem.js