CSS-单位em 和 rem
1,em单位（css3新增单位）
em:就是一种长度单位，它是参照当前元素的字号，如果没有设置，就参照父容器，一直到浏览器的默认字号大小
em 是相对长度单位（参照父元素），其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小。
比如：当前盒子的字号大小为:
.box {
font-size:16px;
width:10em;
height:10em;
}
/*那么此时，盒子宽高为 160px X 160px*/
2,rem单位（css3新增单位）
rem：也是一种长度单位，但不同的是，rem参照的是 html的字体大小，而为元素设置宽高的，而不是参照自身字号，或者父元素的字号
l例如：
/*浏览器的默认字号是：16px*/
.remBox {
width:10em;
height:10em;
font-size:12px;
}
/*此时盒子大小不是 120X120，而是160X160*/
2.1 rem实现移动端适配方法
步骤：
1, 认识常见的移动设备宽度有：320px 360px 375px 414px
2，将 美工设计好的稿件 人为地分为若干份 ：此处我分为 20 份；
****美工的设计稿一般都是 640px 或者 750px
****我们以 640px 的 UI 为例。一般我们把 640px 的 UI 分成 20份，那么每一份的大小为 32px。那么 750px 的 UI 分成 20份，那么每一份的大小为 37.5px。
3，此时我就可以根据需要划分 n份 来分布为每一个盒子
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>rem实现移动设备的适配</title>
<style type="text/css">
@media screen and (device-width:320px) {
html {
font-size: 16px;
}
}
@media screen and (device-width:360px) {
html {
font-size: 18px;
}
}
@media screen and (device-width:375px) {
html {
font-size: 18.75px;
}
}
@media screen and (device-width:414px) {
html {
font-size: 20.7px;
}
}
.allBox {
width: 10rem;
height: 10rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="allBox"> </div> </body>
</html>
/*这样子，无论在哪一种主流的移动设备中，都可以占到整个宽度的一半*/
2.2 如何对美工的设计稿划分，如何放到移动端捏，如下
将美工设计好的稿件 人为地分为若干份 ：此处我分为 20 份；
****美工的设计稿一般都是 640px 或者 750px
****我们以 640px 的 UI 为例。一般我们把 640px 的 UI 分成 20份，那么每一份的大小为 32px。那么 750px 的 UI 分成 20份，那么每一份的大小为 37.5px。
如果在 美工稿（640px）上面 有一个 400X400 的盒子，就可以通过如下代码实现在设备上的占比：
.box400 {
width:400/32rem;
height:400/32rem;
}
/*前提是已经分为了20份*/
/*此时该盒子在对应的移动设备也占了相对应的份数*/
CSS-单位em 和 rem的更多相关文章
- css中单位em和rem
一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...
- css中单位em和rem的区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- css单位em、px、rem和pt的区别
1.PX :像素(Pixel) PX是相对长度单位,它是相对于显示器屏幕分辨率而言的. 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况. 2.EM:是相对长度单位. EM ...
- Css单位px，rem，em，vw，vh的区别
px px就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位.像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位.相对于当前对象内文本的字体尺寸(参考物是父元素的font-s ...
- 分清css的em和rem
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- css3单位em，rem，px，vw，vh等
昨天发现了个好用的方法去设置手机端的rem单位,在这里记录下. html{ font-size:calc(100vw/7.5);} 这是按照750的设计稿(也就是iphone6的设计稿). 100vw ...
- CSS中em、rem和px的区别
任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px,1rem=16px. EM特点 1. em的值并不是固定的: 2. em会继承父级元素的字体大小. rem特点 r ...
- css中单位px、pt、em和rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...
- css中单位px,em，rem和vh/vw的理解
>px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...
- CSS中的单位px、em、rem、%、vw、vh、vm
px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...
随机推荐
- 干掉windows无脑设定：“始终使用选择的程序打开这种文件”、“使用Web服务查找正确的程序”
先看几张图体会一下: 实在很佩服自己就那样默默忍受了很多很多年.其实这些东西在网上小小的一搜,5分钟就能搞定. 然而我们大家都在想,现在没时间,我还要做xxxx事呢,反正多点两下鼠标而已. 是啊,点两 ...
- [Kubernetes]容器日志的收集与管理
在开始这篇文章之前,首先要明确一点: Kubernetes 中对容器日志的处理方式,都叫做 cluster-level-logging ,也就是说,这个日志处理系统,与容器, Pod 以及 Node ...
- linux 安装虚拟机
如果虚拟机创建不了就重启电脑 重启时 按下F2 出现后 第二个 往下 有个默认的 那个那个 打开虚拟机 选择第一个 然后是选择语言选择软件里面的 软件选择选择 基本网页服务器(右侧选择 python ...
- 高可用Redis(三)：Hash类型
1.哈希类型键值结构 哈希类型也是key-value结构,key是字符串类型,其value分为两个部分:field和value 其中field部分代表属性,value代表属性对应的值 上面的图里,us ...
- Django与Ajax
一.Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...
- Appium 测试微信小程序 Webview
通过微信打开debugx5.qq.com,或者直接扫下面二维码 勾选[打开TBS内核Inspector调试功能] Chrome查看页面元素 手机连接电脑,查看是否连接成功.如下展示设备号则为连 ...
- python3学习笔记之十七
1. 网站本质:通过socket建立连接. 服务端(网站) 1. 先启动并监听:80端口 4. 获取请求信息 请求头 请求体 5. 处理请求 响应内容: 响应头:\r\n\r\n响应体 ...
- vue-router路由模式
什么是单页应用? 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web ...
- Electron 项目在 Mac 下复制和粘贴快捷键失效的解决办法
公司的一个项目需要开发跨平台,由于整个项目完全由我一个人开发,本人也是初次接触 Electron,开发过程中遇到了不少坑,同样的代码 Windows 下复制和粘贴没有问题,Mac 下复制和粘贴失效,在 ...
- Vue 2.6 中部分引入 TypeScript 的方法
在 Vue 与 Cesium 联合开发的过程中,我发现很多 Cesium 代码不宜直接写在 .vue 文件中.同时由于 Cesium 库较为复杂,不借助 TypeScript 的静态类型会导致代码难维 ...