《手机屏幕自适应方法的讲解.pptx》由会员分享，可在线阅读，更多相关《手机屏幕自适应方法的讲解.pptx（22页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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:2。WVGA（
3、WideVGA）：VGA加宽了。分辨率800*480，纵横比为5:3。FWVGA（FullWVGA）：而目前Milestone等手机采用的FWVGA（FullWVGA）则更宽一些，达到854*480，纵横比接近16:9。这样的显示主要是为适应当前智能手机终端浏览网页所需。4.什么是屏幕密度什么是屏幕密度PPI：PixelsPerInch（pixel：像素，per：每个、单独的，inch：英寸），也就是每英寸长度里包含的像素点个数。这一指标代表了手机屏幕的像素密度，像素密度越高的屏幕一定程度看上去也就越细腻PPI计算是有固定方法的，我们以OTOME860手机为例：它的屏幕分辨率为960540，屏
4、幕尺寸为4.0英寸；首先，4.0英寸意思是屏幕的对角线长度为4英寸，那么根据以对角线为斜边的勾股定理：长2+宽2=斜边2（x2代表x的平方），那么根据各边对应的比例可以分别计算出屏幕长和宽的英寸数。根据分辨率比为16:9，然后162+92=337，所以：屏幕长=(4Sqrt(337)16=3.4863(英寸)屏幕宽=(4Sqrt(337)9=1.9610(英寸)纵向PPI=9603.4863=275.3636275横向PPI=5401.9610=275.3697275css单位px,em和rem的含义二1.认识认识PX（像素）（像素）px就是css中最基本的相对长度单位，它是相对于显示器屏幕分
5、辨率而言的。优点：比较稳定和精确缺点：在浏览器无法调整以px为单位的字体大小，所以在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。2.认识认识CSS单位单位emem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。为了计算方便，一般会在body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就
6、行了。特点：em的值并不是固定的，同时会继承父级元素的字体大小。3.认识认识CSS3单位单位rem是CSS3新增的一个相对单位（rootem，根em）rem是相对单位，是相对HTML根元素，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px;同理你可以设定htmlfont-size:62.5%那么1rem就等于10px这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。常见的几种手机页面自适应方法三如何让
7、同一web去完美适配所有的终端设备？所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。1.在在HTML头部增加头部增加viewport标签标签在网站HTML文件的开头，增加meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：这段代码支持Chrome、Firefox、IE9以上的浏览器，
8、但不支持IE8以及低于IE8的浏览器。通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在默认情况下，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。在移动设备上，css中的1px并不等于设备的1px，例如早期的iphone3，它的分
9、辨率为320 x480，它的一个css像素是等于一个屏幕物理像素的。后来从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640 x960，这时，一个css像素是等于两个物理像素的。2.不使用绝对宽度不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。具体说，CSS代码不能指定像素宽度：width:xxxpx;只能指定百分比宽度：width:xx%;或者：width:auto;这里开发是指一个网页不仅能用在ps上，也能同时用于移动端，但是对于webapp这种还是需要单独做一个webapp使用的页面。3.使用相对
10、大小的字体使用相对大小的字体字体也不能使用绝对大小（px），而只能使用相对大小（em或者rem）。bodyfont:normal100%Helvetica,Arial,sans-serif;上面的代码指定，字体大小是页面默认大小的100%，即16像素。h1font-size:1.5em;然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。smallfont-size:0.875rem;small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。4.流动布局（流动布局（fluid grid）流动布局的含义是，各个区块的位置都是浮动float的，不是固定
11、不变的。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。另外，绝对定位（position:absolute）的使用，也要非常小心。.mainfloat:right;width:70%;.leftBarfloat:left;width:25%;5.媒体查询器媒体查询器media的应用的应用一种是自动探测屏幕宽度，然后加载相应的CSS文件，例如如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。除了用html标签加载CSS文件，还可以在现有CSS文件中加载。例如：
12、importurl(tinyScreen.css)screenand(max-device-width:400px);一种是根据不同的屏幕分辨率，选择应用不同的CSS规则，例如mediascreenand(max-device-width:400px).columnfloat:none;上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）6.图片的自适应（图片的自适应（fluid image）除了布局和文本，自适应网页设计还必须实现图片的自动缩放。这只要一行CSS代码：img,objectmax-width:100%;老版本的IE不支持max-width，所以只好写成：imgwidth:100%;这行代码对于大多数嵌入网页的视频也有效的THANKS