一、流式布局(百分比布局)
使用非固定像素来定义网页内容,也就是百分比布局,(特别适合于电商网站的布局)通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。这样的布局方式,就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。
二、rem布局(局限条件:主要用来适配手机和ipad,除了手机和ipad,其他的都不能适配。)
rem布局方案(用rem这个单位来做不同手机的适配)是现在做手机端页面最好的。
首先说一下px、em、rem取用选择依据?
-
px 像素(Pixel),绝对单位,是相对于显示器屏幕分辨率而言的,是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换成物理长度,需要指定精度DPI。
-
em 是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对象内文本的字体尺寸未被人设置,则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此不是一个固定的值。
-
rem 是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,仍然是相对大小,但相对的是HTML根元素。
-
区别:IE无法调整那些使用px作为单位的字体大小,而em和rem可以进行缩放,rem相对的是HTML根元素,这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。
rem布局中的尺寸是怎样计算的?
本质是等比缩放,一般是基于宽度,试想一下假设UE图能等比缩放,假设我们将屏幕宽度平均分成100份,每一份用x表示,x=屏幕宽度/100,如果将x作为单位,x前面的数值就代表屏幕宽度的百分比。
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*目标:就是把box适配到常见的iphone5 三星 iphone6手机上*/
/*1.通过切图工具,我们得知 box在设计图(640px)上的大小是16*16px */
/*2.把设计图分成20份 1份=32px*/
/*3.iphone5的宽度=320 iphone6的宽度=375 这里指的是设备独立像素*/
/*4.使用媒体查询*/
@media screen and (width: 320px){
html {
/*在320宽的屏幕中 一份是16px*/
font-size: 16px;/*320/20=16*/
}
}
/*三星*/
@media screen and (width: 360px){
html {
/*在360宽的屏幕中 一份是18px*/
font-size: 18px;/*360/20=18*/
}
}
@media screen and (width: 375px){
html {
/*在375宽的屏幕中 一份是18.75px*/
font-size: calc(375px/20);/*375/20=18.75*/
}
}
.box {
/* 在某一屏幕中的大小=元素的尺寸/32 * 屏幕中一份的大小,即16/32*18或16/32*16,就能得到px为单位的*/
width: 0.5rem;
height: 0.5rem;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
@media screen and (width: 320px){
html {
/在320宽的屏幕中 一份是16px/
font-size: 16px;/320/20=16/
}
}
/三星/
@media screen and (width: 360px){
html {
/在360宽的屏幕中 一份是18px/
font-size: 18px;/360/20=18/
}
}
@media screen and (width: 375px){
html {
/在375宽的屏幕中 一份是18.75px/
font-size: calc(375px/20);/375/20=18.75/
}
}