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和VW布局都是移动端响应式设计的重要工具,开发者可以根据项目需求选择合适的布局方式。理解并熟练掌握这两种方法,能帮助我们构建更加灵活和适应性强的移动Web应用。在实践中,结合使用REM和VW,往往可以...
刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功,后来经过自己不断尝试之后终于成功了。稍微坐下总结: 1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置,而...
使用rem单位实现自适应布局,轻松掌握移动端开发。用法简单,比如普遍的设计图宽度为750px,那么在css中设置为7.5rem即可实现宽度100%
仿京东移动端首页布局,包括固定...我们可以通过在不同移动端设备上展示移动端网页,发现固定尺寸布局的不足之处,以及rem适配、vw适配的原理。 其中vw适配的网页css使用的是scss语法,使用了函数、变量、嵌套等语法。
基于Javascript的移动端rem布局的解决方案,小巧灵活的代码,简洁流畅
总结来说,rem移动端页面满屏H5自适应方案是一种基于CSS3 rem单位的响应式布局技术,通过设置根元素的字体大小和使用rem单位,能够实现跨设备、跨分辨率的页面自适应。这个方案在实际开发中具有广泛的应用,特别是在...
执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下,文件内容如下 module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >...
3. **使用rem定义元素尺寸**:在CSS中,为各种元素(如容器、按钮、图片等)的宽度、高度、内边距、外边距等属性使用rem单位,确保元素尺寸与根元素的字体大小成比例。 4. **媒体查询**:利用CSS的媒体查询(@media...
移动端rem布局rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 ./js/rem.js中 默认设计稿宽度为640 1rem =100px 可自行修改HOW TO USE设置移动端网页专用的viewport meta,至少需要包含width=...
在移动端开发中,REM(Root Em)布局是一种广泛使用的响应式设计方法,它允许开发者以相对于根元素(通常是html元素)的字体大小来...通过深入研究这个demo,我们可以提升在移动端开发中的布局技巧和响应式设计能力。
在移动端Web网页设计中,`rem`布局是一种广泛采用的响应式设计技术,它能够确保网页在不同设备和屏幕尺寸下具有良好的可读性和一致性。`rem`是“root em”的缩写,指的是相对于根元素(通常是`html`元素)字体大小的...
包含的资料将指导学习者掌握移动端开发中的关键布局技巧,包括利用Flex布局实现灵活的元素排列,通过流式布局确保内容自适应屏幕,用rem单位实现响应式尺寸调整,以及使用Less提升CSS的编写效率。结合响应式设计理论...
这个"移动端rem布局项目源码.zip"文件显然包含了在线教育app首页的静态页面,利用REM单位进行尺寸控制,以实现灵活的布局和适应不同屏幕尺寸的效果。以下将详细介绍REM布局及其在移动端应用中的实践。 一、REM单位...
在移动端布局领域,开发者常常面临各种挑战,如屏幕尺寸多样化、设备分辨率差异、浏览器兼容性问题等。"移动端布局终极解决方案 --- 让移动端布局开发更加容易" 提供了一个全面的框架,旨在简化这一过程,让开发者能...
【vw+rem移动端布局】是一种优化移动端网页设计的布局策略,旨在解决不同设备屏幕尺寸下的适配问题。传统的rem布局方案依赖于JavaScript代码动态调整根元素`html`的`font-size`,以此来实现元素尺寸的按比例缩放。...
rem(root em)是CSS3引入的一个长度单位,代表“根em”。1rem等于html元素的font-size,也就是说,当html的font-size为16px时,1rem就是16px。通过调整html元素的font-size,可以改变所有使用rem单位的元素的尺寸。...
移动端rem布局与高清适配的知识点非常丰富,包括屏幕尺寸、像素、PPI、Retina屏幕特性、逻辑像素与物理像素、devicePixelRatio、viewport等概念,以及移动端1px问题的解决方案和对flexiable的改良。以下是对这些知识...
rem.js 移动端自适应