深入理解CSS中的rem以及移动端的布局方法
相信大家对px已经很熟悉了，但是提到rem有些人就不知道了。今天这篇文章主要介绍什么是rem,em,以及他们在移动端中的布局方法，有需要的可以参考一下，希望对你有帮助。
一、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单位是根据父元素的字体大小来进行转变的单位。
1、em的值并不是固定的；
2、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这样就完成了，对三种设备的适配。
以上是深入理解CSS中的rem以及移动端的布局方法的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在Vue项目中使用移动端的手势操作
Oct 08, 2023 pm 07:33 PM
如何在Vue项目中使用移动端的手势操作随着移动设备的普及，越来越多的应用程序需要在移动端上提供更加友好的交互体验。而手势操作是移动设备上常见的交互方式之一，它能够让用户通过触摸屏幕来完成各种操作，如滑动、缩放等。在Vue项目中，我们可以通过第三方库来实现移动手势操作，下面将介绍如何在Vue项目中使用手势操作，并提供具体的代码示例。首先，我们需要引入一个专门用
解决Vue移动端多触点问题
Jun 30, 2023 pm 01:06 PM
在移动端开发中，我们经常会遇到多手指触控的问题。当用户在移动设备上使用多个手指滑动或缩放屏幕时，如何准确地识别和响应这些手势是一个重要的开发难题。在Vue开发中，我们可以采取一些措施来解决移动端多手指触控问题。一、使用vue-touch插件vue-touch是一个用于Vue的手势插件，它可以方便地处理移动端的多手指触控事件。我们可以通过npm安装vue-to
REM(全称REMME)是什么币？
Feb 21, 2024 pm 05:00 PM
REMME是什么币？REMME是一个基于区块链技术的加密货币，致力于提供高度安全且去中心化的网络安全和身份验证解决方案。该项目旨在利用分布式加密技术来增强和简化用户身份验证流程，从而提升安全性和效率。REMME的创新之处在于其借助区块链的不可篡改性和透明性，为用户提供了更可靠的身份验证方式。通过将身份验证信息存储在区块链上，REMME消除了中心化身份验证系统的单点故障，并降低了数据被盗或篡改的风险。这种基于区块链的身份验证方法不仅更安全可靠，而且还能够为用户REMME的背景在当前数字化时代，网络
CSS布局单位的演变与应用：从像素到根据根元素字体大小的相对单位
Jan 05, 2024 pm 05:41 PM
从px到rem：CSS布局单位的演变与应用引言：在前端开发中，我们经常需要用到CSS来实现页面布局。在过去的几年间，CSS布局单位也经历了演变和发展。最开始我们使用的是像素（px）作为单位来设置元素的大小和位置。然而，随着响应式设计的兴起和移动设备的普及，像素单位逐渐暴露出一些问题。为了解决这些问题，新的单位rem应运而生，并逐渐被广泛应用于CSS布局中。一
Vue开发中如何解决移动端双击放大问题
Jun 29, 2023 am 11:06 AM
随着移动端设备的普及，使用Vue进行移动端开发已经成为了常见的选择。然而，我们在移动端开发过程中经常会面临一个问题，就是双击放大。本文将针对这一问题，探讨在Vue开发中如何解决移动端双击放大的具体方法。移动端双击放大问题的出现，主要是因为移动设备在触摸屏上进行双击操作时，会自动放大网页的缩放比例。对于一般的网页开发来说，这种双击放大通常是有好处的，因为它可以
使用Python和百度地图API实现移动端地图定位功能的方法
Jul 29, 2023 pm 11:33 PM
使用Python和百度地图API实现移动端地图定位功能的方法随着移动互联网的发展，地图定位功能在移动端应用中变得越来越常见。Python作为一种流行的编程语言，也可以通过使用百度地图API来实现移动端地图定位功能。下面将介绍使用Python和百度地图API实现地图定位功能的步骤，并提供相应的代码示例。步骤一：申请百度地图API密钥在开始之前，我们首先需要申请
Vue实现移动端响应式布局的完整指南（Vant）
Jun 09, 2023 pm 04:09 PM
Vue实现移动端响应式布局的完整指南（Vant）移动端响应式布局是现代Web开发中非常重要的一环，随着移动设备的普及，如何快速响应用户手机屏幕的大小和分辨率，成为了前端工程师必须面对的挑战之一。Vue框架自带响应式布局的特性，同时也有不少第三方库来帮助我们实现响应式布局。其中，Vant组件库是一款Vue移动端UI库，因其十分强大、易用和定制化，并且完全符合移
Vue开发：优化移动端手势缩放卡顿问题
Jun 30, 2023 pm 04:33 PM
Vue开发中如何解决移动端手势缩放页面卡顿问题近年来，移动端应用的普及使得手势操作成为用户交互的重要方式。在Vue开发中，实现移动端手势缩放功能往往会遇到页面卡顿的问题。本文将探讨如何解决这一问题，并提供一些优化策略。了解手势缩放原理在解决问题之前，我们首先需要了解手势缩放的原理。手势缩放通过监听触摸事件来实现，当用户用两个手指滑动屏幕时，页面会按照手指的滑
