关于移动网页及响应式删格或者H5网页尺寸适配方案-HXC博客
  •  首页
  •  游戏/动漫
  •  日记/生活
  •  时间轴
  •  留言板
  • 
    关于移动网页及响应式删格或者H5网页尺寸适配方案
     作者:胡新春  发布时间:2017-11-14 16:18:13  访客:211

    当我们在制作移动端界面或者使用媒体查询写相应式布局时常常会碰到一个棘手的问题,那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。

    2017081710522091676.jpg

    请注意:

    (以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含

    <meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” />
    <meta content=”telephone=no” name=”format-detection” />

    根据目前市场流行的手机移动终端,统计他们的设备独立像素。

    当前最流行的手机的所有尺寸大小规范: http://screensiz.es/phone   值得大家好好细看的智能手机尺寸图表。

    也只有iPhone6+采用了分辨率降频处理。


    具体看下图:

    123412343254.png

    有兴趣的小伙伴可以去尝试不同的尺寸,比如1倍的、2倍的、3倍。最终得出的试验结果是。H5的设计稿一般设计为640x1136px即可。 既满足了显示需求,又能降低用户加载图片需要的带宽。


    可以用各种分辨率的移动智能手机查看我们设计的H5页面时,当然,也会出现如下的情况,内容显示不全,甚至一些重要内容和按钮都会被遮挡。

    第一:背景图片必须采用background-size:cover;来实现。

    第二:我们在进行H5页面内容规划布局设计的时候,不能把重要内容放在太偏下的位置或者偏上,否则前端布局时可能出现内容显示不全的情况。


    1.像素

    物理像素/设备像素

    物理像素也被称为设备像素,它是显示设备最微小的物理部件。

    屏幕密度 通常以每英寸有多少物理像素来计算(PPI)

    独立像素/css像素,是一个抽象的单位,主要用于浏览器上,用了精确度量web页面上的内容。一般情况下,CSS像素被称为与设备无关的像素(device-independent像素),简称为“DIPs”

    在一个标准的显示密度下,一个CSS像素对应着一个设备像素。

    独立像素比/window.devicePixelRatio window.devicePixelRatio=物理像素/独立像素

    通过计算你会发现刚才的两种手机的结果分别是1或者2(当然还有其它手机屏幕结果有些差别)


    手机屏幕分为:

    一:非视网膜屏幕(物理像素320,该设备的独立像素(视区宽度)也是320)

    二:视网膜屏幕(物理像素640,该设备的独立像素(视区宽度)还是320

    <meta name="viewport"content="width=device-width"> 这个代码的作用就是让视图区域撑满手机物理屏幕。


    html文件头部加上这个代码后,手机显示的大小和电脑显示的大小尺寸大小就一样了。 但是手机上显示的图片就模糊了,这是因为你要显示同样的物理大小,视网膜屏幕就要用双倍的物理像素来显示(一个一像素的图片,如果用浏览器4个像素(即放大了一倍)来看会变模糊和失真,所以在给手机做图片的时候,要放大一倍,就是在手机上显示的图片是100乘以100,那ps做图片要做成200乘以200这样才会清晰)。

     

    笔记本的分辨率:


    10-12英寸(上网本)1024×600、1366×768


    13.3-15.6英寸大部分是1366×768


    13英寸有1280×800、1600×900


    15英寸有1600×900、1920×1080(单屏最高分辨率)


    还有18、19英寸的,分辨率也是1920×1080


    华硕三屏笔记本是1920×1080的3倍。


    响应式布局方式:
    1.外联样式表

    在这里我们可以根据不同的设备载入不同的CSS样式表

    <link rel="stylesheet" type="text/css" media="screen and (min-width:960px)" href="css/gt-960px.css">


    当页面宽度大于等于960px时,载入样式表gt-960px.css

    <link rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width:960px)" href="css/gt-600px-lt-960px.css">


    当页面宽度大于等于600px且小于等于960px时,载入样式表gt-600px-lt-960px.css

    <link rel="stylesheet" type="text/css" media="screen and (max-width:600px)" href="css/lt-600px.css">


    当页面宽度小于等于600px时,载入样式表lt-600px.css

    2.样式表中内嵌发
    @media screen and(){ }
    3.弹性图片

    弹性图片

    我们需要为图片设置max-width: 100%和height: auto,来实现其弹性化。

    img {
      max-width: 100%;
      height: auto;
      width: auto9; /* ie8 */
     }

    2017081710522087535.jpg


    移动端H5页面的设计稿尺寸大小规范内容如下:

    1、像素是没有宽高的(不要被Photoshop中的像素格欺骗),它只代表一个采样的色值。

    2、任何图片作为数据信息被保存在存储盘中时,只有宽高像素数是有意义的,此时的ppi对于图片来说时没有任何意义,也并不能描述这个图片有多少英寸的宽度或者高度,而只有在被打印出来后才有ppi的意义,被打印出来才可以描述这张图片有多高多宽。


    3、平时制作H5页面时设计原型时,产品经理出的原型稿建议屏宽为320px,用这个尺寸一是为了浏览方便(现在很多手机的屏宽达到1440px,用这个尺寸去模拟显然不现实),二是以iPhone5s为标准的手机屏宽较小,进行内容排版布局时屏宽应该向下兼容。


    4、制作设计稿时,设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时,按照现在流行的做法,可以直接使用原型稿上的尺寸,也就是设计稿上的1/2。


    5、一般情况下,H5页面设计稿做成640x1136px是最为稳妥的尺寸,在812px高度处增加一条安全线,重要内容在此线之上(网上有些文章说安全线是960px处,个人认为不太准确)。既保证了在移动设备上显示清晰,也保证了素材的最小尺寸。



    点评一下

    
    程序:HXC博客v1.0+ 主题:HXC博客前端Funs主题    环境:lamp  后台
    博客平稳运行2年+