移动端布局、手机屏幕尺寸(rem,vw,vh)及分辨率

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端布局、手机屏幕尺寸(rem,vw,vh)及分辨率相关的知识,希望对你有一定的参考价值。

参考技术A 移动端

pm 移动端页面布局

弹性布局(100%布局)——拉钩?、天猫首页

弹性布局(100%布局)的特点:

顶部与底部的bar不管分辨率怎么变,它的?度和位置都不变;  中间每条招聘信息不管分

辨率怎么变,招聘公司的图标等信息 都位于条目的左边,薪资都位于右边.

等比缩放布局(rem布局)—网易、淘宝首页

什么是屏幕尺寸?

移动端屏幕尺寸:屏幕对角线的长度,单位是英寸(1英寸=2.54厘米)。

常见的尺寸有:2.4,2.8,3.5,3.7,4.2,5.0,5.5,6.0

什么是屏幕分辨率?

屏幕分辨率:指横纵方向上的像素点数,单位为px,1px=1个像素点。

一般以纵向像素*横向像素表示 一个手机的屏幕分辨率。如:1960*1080

这里的一个像素是指物理设备的一个像素点。

什么是屏幕像素密度?

屏幕像素密度:屏幕上每英寸可以显示像素点的数量,单位是ppi(pixels  per inch)缩

写。

iphone3GS和iphone4区别:屏幕尺寸一样,屏幕分辨率相差一倍,屏幕像素密度也相差一倍数。

PX:像素,将显示器分成非常细小的方格,每一个方格就是1px。

注:(网页重构中使用的px 和屏幕分辨率的px不一定是一样的大小)。

实际上像素分为两种:设备像素和逻辑像素( CSS像素)

DPR:设备像素比DPR(devicePixelRa嫧o)是默认缩放为100%的情况下,设备像素和CSS像素的

比值

在早先的移动设备中,并没有DPR的概念。随着技术的发展,移动设备的屏幕像素密度越来

越高。从iphone4开始苹果公司推出了所谓的re嫧na视网膜屏幕。之所以叫做视网膜屏幕,是

因为屏幕的PPI(屏幕像素密度)太高,人的视网膜无法分辨出屏幕上的像素点。iphone4的分

辨率提高了一倍,但屏幕尺寸却没有变化,这意味着同样大小的屏幕上,像素多了一倍,于

是DPR = 2

1.rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位。

2.为什么web app要使用rem?

实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏

幕,根据变化html的字体大小来控制rem的大小,

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。

vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。

vmin:vw和vh中较小的那个。

vmax:vw和vh中较大的那个。

vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,

android browser4.4+支持,chrome for android39支持

1.rem

rem是指相对于根元素的字体大小的单位。

2.根元素

如果根元素是相对设备尺寸自动变换。

3.VW

视窗宽度,1vw等于视窗宽度的1%。

4.VW转换成PX赋值给font‐size

例:设备的分辨率为640*1136,逻辑像素为320*568     1VW=3.2px

Font-size:100px;转换成VW    font‐size:31.25vw;

1rem=31.25vw可一起结合写等比例缩放布局。

1.px

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2.em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被

人为设置,则相对于浏览器的默认字体尺寸。  

3.rem

rem是指相对于根元素的字体大小的单位。

4.VW

视窗宽度,1vw等于视窗宽度的1%。

移动端

 

webapp制作标准

1.自适应手机端任何尺寸设备

2.多平台UI表现一致

3.完美适配不同设备浏览器

 

 

rem能等比适配所有屏幕,IE6/7/8不适配

em

浏览器最小解析字号为12px,rem不能低于12px

 

 

vw=‘view width‘

vh=‘view height‘

100vw=100% screen width

 

制作手机端项目常用方法:

* 百分比自适应

* 弹性布局自适应

* rem自适应

* js控制自适应(正常布局)

* phonegap , ionic框架实现

 

 js改变适配只能改宽度。

 

以上是关于移动端布局、手机屏幕尺寸(rem,vw,vh)及分辨率的主要内容,如果未能解决你的问题,请参考以下文章

如何利用vw+rem进行移动端布局

移动端布局vw和vh、em与rem

移动端兼容小计

移动端

移动端rem自适应布局-最简单易懂的两种方法

移动端适配