手机屏幕自适应方法的讲解

《手机屏幕自适应方法的讲解》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、手机屏幕自适应方法的讲解目录一认识手机屏幕分辨率及屏幕密度二css单位px,em和rem的含义三常见的几种手机页面自适应方法认识手机屏幕分辨率及屏幕密度一1.认识手机屏幕分辨率手机屏幕分辨率是手机的重要参数之一，是屏幕上显示像素个数的多少，以水平和垂直像素来衡量的。比如分辨率1024*768，其中的1024表示屏幕上水平方向显示的像素点数，768表示垂直方向的像素点数。屏幕分辨率与屏幕大小是两个不同概念，屏幕大小如2.1英寸，3.5英寸等等，是指屏幕对角线的长度。就屏幕显示来说，屏幕分辨率与屏幕大小还是存在一定的关系的，相同屏幕大小的手机，

2、屏幕分辨率越大，屏幕显示就也清晰。2.手机屏幕分辨率有哪些3.主要的5种屏幕分辨率VGA(VideoGraphicsArray)：是指分辨率为640*480，由此可以看出纵横显示比是4:3，这个最早是电脑屏幕和电视屏幕的标准。QVGA（QuarterVGA）：这是四分之一的VGA。不过，注意是面积的四分之一。因此，QVGA的分辨率就是长宽各是VGA的一半，也就是320*240，纵横比仍然是4:3。HVGA（Half-sizeVGA）：VGA的一半，还是面积的一半，也就是一边为一半，另一边不变。因此分辨率为320*480（或者480*320）

3、，纵横比为3:2。WVGA（WideVGA）：VGA加宽了。分辨率800*480，纵横比为5:3。FWVGA（FullWVGA）：而目前Milestone等手机采用的FWVGA（FullWVGA）则更宽一些，达到854*480，纵横比接近16:9。这样的显示主要是为适应当前智能手机终端浏览网页所需。4.什么是屏幕密度PPI：PixelsPerInch（pixel：像素，per：每个、单独的，inch：英寸），也就是每英寸长度里包含的像素点个数。这一指标代表了手机屏幕的像素密度，像素密度越高的屏幕一定程度看上去也就越细腻PPI计算是有固定方法

4、的，我们以OTOME860手机为例：它的屏幕分辨率为960×540，屏幕尺寸为4.0英寸；首先，4.0英寸意思是屏幕的对角线长度为4英寸，那么根据以对角线为斜边的勾股定理：长^2+宽^2=斜边^2（x^2代表x的平方），那么根据各边对应的比例可以分别计算出屏幕长和宽的英寸数。根据分辨率比为16:9，然后16^2+9^2=337，所以：屏幕长=(4÷Sqrt(337))×16=3.4863(英寸)屏幕宽=(4÷Sqrt(337))×9=1.9610(英寸)纵向PPI=960÷3.4863=275.3636≈275横向PPI=540÷1.961

5、0=275.3697≈275css单位px,em和rem的含义二1.认识PX（像素）px就是css中最基本的相对长度单位，它是相对于显示器屏幕分辨率而言的。优点：比较稳定和精确缺点：在浏览器无法调整以px为单位的字体大小，所以在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。2.认识CSS单位emem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。为了计算方便，一般会在body选择器中声明

6、Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。特点：em的值并不是固定的，同时会继承父级元素的字体大小。3.认识CSS3单位rem是CSS3新增的一个相对单位（root em，根em）rem是相对单位，是相对HTML根元素，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px;同理你可以设定html{font-size:62.5%}那么1rem就等

7、于10px这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 目前，除了IE8及更早版本外，所有浏览器均已支持rem。常见的几种手机页面自适应方法三如何让同一web去完美适配所有的终端设备？所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出

8、来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。1.在HTML头部增加viewport标签在网站HTML文件的开头，增加meta标签告诉浏览器视口宽度等