挪动Web布局。移动Web布局。

动Web开发之动页面布局

倒Web开发之动页面布局

前言

本文针对手机配备设计之页面,并非兼容全设备的响应式布局,常见的MobileWeb页面如H5页面、手机页面、WAP页、webview页面等等。在不同尺寸的无绳电话机配备上,页面“相对性的上合理之显得(自适应)”或者“保持统一效果的齐比较缩放(看起差不多)

前言

正文针对手机设备设计的页面,并非兼容全设备的响应式布局,常见的MobileWeb页面如H5页面、手机页面、WAP页、webview页面等等。在不同尺寸的无绳电话机配备及,页面“相对性的达合理之显示(自适应)”或者“保持统一效果的齐较缩放(看起差不多)

深入概念引出viewport

图片 1

深深概念引出viewport

图片 2

Pixel

  • 配备像素

    • 于LCD显示器中,基于点阵排列,每一个如素右由红绿蓝子像从结合

    图片 3

    • CRT显示器

      图片 4

  • CSS像素(用于控制元素样式的样式单位像素,是一个相对值)

    • CSS像素与屏幕像素1:1一律非常时:

      图片 5

    • 浏览器窗口宽度一定之情形下,把页面放大(Ctrl+),CSS像素(黑色边框)开始为牵涉伸,此时1个CSS像素大于1单屏幕像从

      图片 6

Pixel

  • 装备像素

    • 于LCD显示器中,基于点阵排列,每一个如素右由红绿蓝子像从结合

    图片 7

    • CRT显示器

      图片 8

  • CSS像素(用于控制元素样式的样式单位像素,是一个相对值)

    • CSS像素与屏幕像素1:1同一非常时:

      图片 9

    • 浏览器窗口宽度一定之景况下,把页面放大(Ctrl+),CSS像素(黑色边框)开始受牵涉伸,此时1个CSS像素大于1单屏幕像从

      图片 10

ppi(Pixel Per Inch)

  • 此讨论的凡独对显示设备(另外还有打印照片时之分辨率、打印精度),指的凡屏幕密度。PPI全称为Pixel
    Per
    Inch,译为各英寸像素取值。ppi值越强,单位面积内所占有的如素越多,显示的画质越好。
  • PPi中的pixel指的凡物理(设备)像素。

    图片 11
    图片 12

  • ppi是各个令装备的一个定值,一个原则性参数,下图为Samsung Galaxy S4吧条例

    图片 13

  • ppi过大带来的题材,相同之图片素材,ppi越强的配备显示更加聊。下图为一个分辨率像从在屏幕中之位置

    图片 14

  • 出于这样的问题在,高ppi(高清屏)设备下的UI会采取一定之缩放比例,让文本或资料放大(也不怕是给分辨率像从还是CSS像素放大),下面是CSS像素和情理像从的比例公式:DevicePixelRatio大凡手机的情理像素和实际采用如从的缩放比(会就手机默认缩放比和人造缩放浏览器页面改变))

    DevicePixelRatio定义如下:
    
    window.devicePixelRatio = physical pixels / dips(device-independent pixels即CSS像素)
    

    图片 15

ppi(Pixel Per Inch)

  • 此处讨论的是单纯对显示设备(另外还有打印照片时之分辨率、打印精度),指的是屏幕密度。PPI全称为Pixel
    Per
    Inch,译为各国英寸像素取值。ppi值越强,单位面积内所占用的比如素越多,显示的画质越好。
  • PPi中的pixel指的是大体(设备)像素。

    图片 16
    图片 17

  • ppi是各台设备的一个定值,一个一定参数,下图为Samsung Galaxy S4也例

    图片 18

  • ppi过高带来的题目,相同的图片素材,ppi越强之设施显示更加小。下图也一个分辨率像从在屏幕被的职

    图片 19

  • 由于这样的题目存在,高ppi(高清屏)设备下之UI会采取一定的缩放比例,让文本或材料放大(也就是是深受分辨率像从还是CSS像素放大),下面是CSS像素和大体像从的比重公式:DevicePixelRatio凡手机的大体像素和事实上应用诸如从的缩放比(会随着手机默认缩放比和人造缩放浏览器页面改变))

    DevicePixelRatio定义如下:
    
    window.devicePixelRatio = physical pixels / dips(device-independent pixels即CSS像素)
    

    图片 20

dppx(dots per pixel)

  • 意味着单个CSS像素占用的情理像从个数,与DPR等价,只不过是由微观之角度。

dppx(dots per pixel)

  • 代表单个CSS像素占用的大体像从个数,与DPR等价,只不过是从微观的角度。

dpi(Dots per inch)

  • 对显示设备的像素密度而言,dpi与ppi是齐价格的。

dpi(Dots per inch)

  • 对显示设备的像素密度而言,dpi与ppi是等价格的。

CSS Reference Pixel

  • W3C规定(CSS Reference
    Pixel),把丁目能分辨到之,距离自己一个臂膀长度(约28英寸),像从密度为96dpi装置及之一个大体像素设为参照像素(目的是为了保CSS像素在不同装备、不同距离观测到之尺寸同等)
  • 透过CSS参考像素可以算起当不同之设备及行使相当的CSS像素大小,使得视觉及亦然。
    图片 21

  • 这就是说问题来了,如何实施这个标准吗?通过行使viewport

    <meta name="viewport">
    

CSS Reference Pixel

  • W3C规定(CSS Reference
    Pixel),把人口眼能辨识到之,距离自己一个双臂长度(约28英寸),像从密度为96dpi装备及之一个大体像素设为参照像素(目的是以保证CSS像素在不同装备、不同距离观测到之大大小小相同)
  • 通过CSS参考像素可以测算出以不同之配备及运用合适的CSS像素大小,使得视觉及等同。
    图片 22

  • 那问题来了,如何执行这个专业吧?通过行使viewport

    <meta name="viewport">
    

viewport

图片 23

  • 默认情况下,手机屏幕为980px失渲染页面,(下图图像也320px,设备也iphone4)

    图片 24

  • 此时由此安装渲染宽度为320px,即为手机设备的分辨率,此时图像是满整个区域的

    图片 25

  • 通过上面可得,可以设置width=device-width(手机屏幕分辨率),指定布局宽度等于手机分辨率宽度,可以兑现

    • 啊走装备开支的响应式网页经常,你会面临多更分辨率情况,没有必要采取及重量级的mediaquery
    • 免手机浏览器采用桌面分辨率宽度(980px等)去渲染页面
    • 相当手机横屏或竖屏
  • 下为viewport的形似设置

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
  • 除此以外Viewport还分为两种植,Layout Viewport和Visual Viewport
    图片 26图片 27

viewport

图片 28

  • 默认情况下,手机屏幕为980px失渲染页面,(下图图像为320px,设备也iphone4)

    图片 29

  • 这会儿通过安装渲染宽度为320px,即为手机设备的分辨率,此时图像是满载整个区域的

    图片 30

  • 经过地方可得,可以装width=device-width(手机屏幕分辨率),指定布局宽度等于手机分辨率宽度,可以实现

    • 啊运动设备支出的响应式网页时,你会面临多又分辨率情况,没有必要采取及重量级的mediaquery
    • 避免手机浏览器采用桌面分辨率宽度(980px等)去渲染页面
    • 匹配手机横屏或竖屏
  • 下面为viewport的相似安装

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
  • 此外Viewport还分为两种,Layout Viewport和Visual Viewport
    图片 31图片 32

卷土重来视觉稿,多屏适配

  • 对运动端支出而言,为了形成页面高清的效用,视觉稿的专业往往会以以下简单点:
    • 先是,选取一暂缓手机的屏幕宽高作为基准(以前是iphone4的320×480,现在再次多之凡iphone6的375×667)。
    • 对此retina屏幕(如:
      dpr=2),为了达成高清效果,视觉稿的画布大小会是极的2加倍,也就是说像素点个数是原本的4倍增(对iphone6而言:原先的375×667,就会化750×1334)。]
  • 书、高宽间距、图像(图标、图片)
    • 矢量化、字体化、image-set等
    • 当满足快速开之需下,利用 css 将图像限定于要素外( img
      图片应用[max-]width: 100%,背景图像使用background-size
      ),布局就对素进行。
  • 几乎个问题(详情)
    • retina下,图片高清问题
    • retina下,border: 1px问题
    • 多屏适配布局问题
    • 字体大小问题

以下图为条例,分析活动Web开发在页面架构和布局的不二法门与差异性(效果图为640px)

图片 33

复原视觉稿,多屏适配

  • 对运动端支付而言,为了完成页面高清的功效,视觉稿的正儿八经往往会随以下简单触及:
    • 首先,选取一放缓手机的屏幕宽高作为规范(以前是iphone4的320×480,现在还多之是iphone6的375×667)。
    • 对retina屏幕(如:
      dpr=2),为了上高清效果,视觉稿的画布大小会是准的2倍,也就是说像素点个数是本来的4倍增(对iphone6而言:原先的375×667,就会成750×1334)。]
  • 书、高宽间距、图像(图标、图片)
    • 矢量化、字体化、image-set等
    • 在满足快速开之需求下,利用 css 将图像限定在要素外( img
      图片采取[max-]width: 100%,背景图像使用background-size
      ),布局就对素进行。
  • 几只问题(详情)
    • retina下,图片高清问题
    • retina下,border: 1px问题
    • 多屏适配布局问题
    • 字体大小问题

以下图为例,分析运动Web开发以页面架构和布局的章程与差异性(效果图为640px)

图片 34

1.一定高度,宽度自适应

  • 实现

    • viewport width 设置为 device-width,以较小幅度(如
      320px)的视觉稿作为参照进行布局
    • 垂直方向的可观与距离使用定值,水平方向混合使用定值和百分比或者采用flex弹性布局
    • 图像元素根据容器使用定值或background-size缩放
    • 代码段

      <meta name="viewport" content="width=device-width,initial-scale=1">
      
  • 要点

    • 鉴于高度稳定,宽度自适应,在充分屏幕手机下元素被拉长了,所以计划性之时光只能设计横向拉伸的元素布局,存在不少局限性。
    • 因略幅度作为参照是因要布局满足了稍稍幅度的布置,当屏幕变宽时,简单的填空白就可以了(比如网易新闻);而一旦转就可能造成“挤坏了”,考虑
      header 区域,左测 logo 右测横向 nav 的事态。
    • 消多少增幅之布局,又得很开间的图像,这是一个矛盾点。
    • 兼容性较好。
  • 案例
    • 体制中之尺码还以视觉稿二分之一百般小设置,demo。
    • 腾讯、京东、百度、天猫、亚马逊的首页

1.稳定高度,宽度自适应

  • 实现

    • viewport width 设置为 device-width,以比小增幅(如
      320px)的视觉稿作为参照进行布局
    • 笔直方向的惊人及间隔使用定值,水平方向混合使用定值和百分比要以flex弹性布局
    • 图像元素根据容器使用定值或background-size缩放
    • 代码段

      <meta name="viewport" content="width=device-width,initial-scale=1">
      
  • 要点

    • 由高度稳定,宽度自适应,在非常屏幕手机下元素被拉了,所以计划之时节只能设计横向拉伸的因素布局,存在很多局限性。
    • 盖小幅度作为参照是以要是布局满足了聊幅度的张,当屏幕变宽时,简单的填写空白就足以了(比如网易新闻);而只要反过来就可能引致“挤坏了”,考虑
      header 区域,左测 logo 右测横向 nav 的情形。
    • 需要有些幅度之布局,又要格外幅面的图像,这是一个矛盾点。
    • 兼容性较好。
  • 案例
    • 体制中之尺码还循视觉稿二分之一深小设置,demo。
    • 腾讯、京东、百度、天猫、亚马逊的首页

2.原则性宽度,viewport缩放

  • 实现

    • 视觉稿、页面宽度、viewport width
      使用统一宽度,利用浏览器自身缩放完成适配。页面样式(包括图像元素)完全本视觉稿的尺码,使用单位px即可。
    • 一定宽度值考虑以下简单碰:
      • 主流分辨率,参考Screen
        Sizes和友盟指数的数据
      • 设计部门常用尺寸
    • 代码段

      • head头部(根据屏幕宽度来动态生成viewport,生成的 viewport
        基本是如此)

        <meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
        
      • css style

        body {
            width: 640px;
            margin: 0 auto;
         }
        

        图片 35

  • 优点:
    • 开简单:缩放交给浏览器,完全以视觉稿切图。
    • 复原精准:绝对等比例缩放,可以精准还原视觉稿(不考虑清晰度之气象下)。
    • 测试好:在PC端即可成功大部分测试,手机端只需要研究调整一些细节(比如图标、字体混合排列时,因为字体不同造成的对齐问题)。
  • 是的题材:
    • 例如从少:对于有些分辨率较逊色的无绳电话机,可能设备像从还免上指定的
      viewport
      宽度,此时屏幕的渲染可能就非准确了。比较普遍的是边框“消失”了,不过就手机硬件的翻新,这个题材会见越来越少的。
    • 缩放失效:某些安卓机不克健康的基于 meta 标签中 width
      的值来缩放 viewport,需要般配 initial-scale 。
    • 文件折行:存在于缩放失效的机型受到,某些手机为便利文本的读,在文件到达
      viewport 边缘(非元素容器的边缘)时便进行折行,而当 viewport
      宽度为修正后,浏览器并没有科学的重绘,所以就算发现文本没有占满整行。一些常用的段落性文本标签会满怀于该问题。
  • 釜底抽薪问题

    • 缩放失效问题要经 js 动态设定 initial-scale。

      var fixScreen = function() {
          var metaEl = doc.querySelector('meta[name="viewport"]'),
              metaCtt = metaEl ? metaEl.content : '',
              matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
              matchWidth = metaCtt.match(/width=([^,\s]+)/);
      
          if ( metaEl && !matchScale && ( matchWidth && matchWidth[1] != 'device-width') ) {
              var    width = parseInt(matchWidth[1]),
                  iw = win.innerWidth || width,
                  ow = win.outerWidth || iw,
                  sw = win.screen.width || iw,
                  saw = win.screen.availWidth || iw,
                  ih = win.innerHeight || width,
                  oh = win.outerHeight || ih,
                  ish = win.screen.height || ih,
                  sah = win.screen.availHeight || ih,
                  w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
                  scale = w / width;
      
              if ( ratio < 1) {
                  metaEl.content += ',initial-scale=' + ratio + ',maximum-scale=' + ratio + ', minimum-scale=' + scale;
              }
          }
      }
      
    • 文本折行问题

      section, p, div,
      h1, h2, h3, h4, h5, h6,
      .fix-break { 
         background: tranparent url('about:blank');
         word-break: break-all;
      }
      
  • 案例

    • demo
    • 荔枝FM

2.原则性宽度,viewport缩放

  • 实现

    • 视觉稿、页面宽度、viewport width
      使用统一宽度,利用浏览器自身缩放完成适配。页面样式(包括图像元素)完全依照视觉稿的尺码,使用单位px即可。
    • 稳定宽度值考虑以下简单触及:
      • 主流分辨率,参考Screen
        Sizes和友盟指数的数据
      • 设计部门常用尺寸
    • 代码段

      • head头部(根据屏幕宽度来动态生成viewport,生成的 viewport
        基本是这般)

        <meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
        
      • css style

        body {
            width: 640px;
            margin: 0 auto;
         }
        

        图片 36

  • 优点:
    • 支付简单:缩放交给浏览器,完全以视觉稿切图。
    • 过来精准:绝对等比例缩放,可以精准还原视觉稿(不考虑清晰度之图景下)。
    • 测试好:在PC端即可形成大部分测试,手机端只待研究调整片细节(比如图标、字体混合排列时,因为字体不同造成的对齐问题)。
  • 是的题材:
    • 譬如从少:对于有分辨率较逊色之无绳电话机,可能设备像从还不上指定的
      viewport
      宽度,此时屏幕的渲染可能就不准确了。比较大的凡边框“消失”了,不过随着手机硬件的换代,这个题材会见越来越少的。
    • 缩放失效:某些安卓机不能够健康的基于 meta 标签中 width
      的价值来缩放 viewport,需要相当 initial-scale 。
    • 文本折行:存在为缩放失效的机型中,某些手机为方便文本的看,在文件到达
      viewport 边缘(非元素容器的边缘)时虽进行折行,而当 viewport
      宽度为修正后,浏览器并无科学的重绘,所以便意识文本没有据为己有满整行。一些常用的段落性文本标签会满怀于该问题。
  • 缓解问题

    • 缩放失效问题需经过 js 动态设定 initial-scale。

      var fixScreen = function() {
          var metaEl = doc.querySelector('meta[name="viewport"]'),
              metaCtt = metaEl ? metaEl.content : '',
              matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
              matchWidth = metaCtt.match(/width=([^,\s]+)/);
      
          if ( metaEl && !matchScale && ( matchWidth && matchWidth[1] != 'device-width') ) {
              var    width = parseInt(matchWidth[1]),
                  iw = win.innerWidth || width,
                  ow = win.outerWidth || iw,
                  sw = win.screen.width || iw,
                  saw = win.screen.availWidth || iw,
                  ih = win.innerHeight || width,
                  oh = win.outerHeight || ih,
                  ish = win.screen.height || ih,
                  sah = win.screen.availHeight || ih,
                  w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
                  scale = w / width;
      
              if ( ratio < 1) {
                  metaEl.content += ',initial-scale=' + ratio + ',maximum-scale=' + ratio + ', minimum-scale=' + scale;
              }
          }
      }
      
    • 文件折行问题

      section, p, div,
      h1, h2, h3, h4, h5, h6,
      .fix-break { 
         background: tranparent url('about:blank');
         word-break: break-all;
      }
      
  • 案例

    • demo
    • 荔枝FM

3.rem做宽度,viewport缩放

  • 实现

    • 准某一定宽度设定 rem 值(即 html 的
      font-size),页面任何需要弹性适配的元素,尺寸都折算为 rem
      进行布局,不需适配的元素或用 px 为单位。
    • 当页面渲染时,根据页面中宽度进行计算,调整 rem
      的大小,动态缩放以达适配的效益。
    • 根据 devicePixelRatio 设定 initial-scale 来放大
      viewport,使页面按照物理像从渲染,提升清晰度。
    • 由此JS去动态计算根元素的font-size(所有装备均匹配),也足以以media
      query(兼容自己网站主流的有的屏幕设备)
    • 据悉设备像素比(window.devicePixelRatio)给安装data-dpr
    • 代码段(动态生成 viewport)

      不用写 meta
      标签,该方法mobile-util.js因
      dpr 自动生成,并在 html 标签中丰富 data-dpr 和 font-size
      两独属于性值。

  • 优点:

    • 清晰度高,能落得物理像从的清晰度。
    • 能解决 DPR 引起的“1像素”问题。
    • 通向后相当于好,即便屏幕宽度增、PPI 增加该方案还适用。
  • 缺点:
    • 适配 js 需尽可能早入,减少(避免)viewport 变化引起的重绘。
    • 某些Android机会丢掉 rem 小数部分。
    • 待预编译库进行单位转换。
  • 部分瞩目的地方

    • chrome当font-size小于12时时,rem会按照12来计算,设置基准值要考虑这或多或少。
    • 正如小的背景图(比如部分 icon)的 background-size 不要采取具体 rem
      数价,裁剪后会见并发边缘丢失。应采用与素等尺寸切图,设定
      background-size: contain|cover 来缩放。
  • 动态调整 rem 的艺术如下:

    var fixScreen = function() {
        var metaEl = doc.querySelector('meta[name="viewport"]'),
            metaCtt = metaEl ? metaEl.content : '',
            matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
            matchWidth = metaCtt.match(/width=([^,\s]+)/);
    
        if ( !metaEl ) { // REM
            var docEl = doc.documentElement,
                maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大页面宽度
                dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
                scale = 1 / dpr,
                tid;
    
            docEl.removeAttribute('data-mw');
            docEl.dataset.dpr = dpr;
            metaEl = doc.createElement('meta');
            metaEl.name = 'viewport';
            metaEl.content = 'initial-scale=' + ratio + ',maximum-scale=' + ratio + ', minimum-scale=' + scale;
            docEl.firstElementChild.appendChild(metaEl);
    
            var refreshRem = function() {
                var width = docEl.getBoundingClientRect().width;
                if (width / dpr > maxwidth) {
                    width = maxwidth * dpr;
                }
                var rem = width / 16;
                docEl.style.fontSize = rem + 'px';
            };
    
            //...
    
            refreshRem();
        }
    }
    
  • 案例

    • demo
    • 淘宝网触屏版

3.rem做宽度,viewport缩放

  • 实现

    • 比如某一定宽度设定 rem 值(即 html 的
      font-size),页面任何索要弹性适配的元素,尺寸都折算为 rem
      进行布局,不需要适配的因素或用 px 为单位。
    • 当页面渲染时,根据页面中宽度进行计算,调整 rem
      的大小,动态缩放以达适配的力量。
    • 冲 devicePixelRatio 设定 initial-scale 来推广
      viewport,使页面按照物理像从渲染,提升清晰度。
    • 透过JS去动态计算根元素的font-size(所有装备通通匹配),也可使用media
      query(兼容自己网站主流的组成部分屏幕设备)
    • 基于设备像素比(window.devicePixelRatio)给安装data-dpr
    • 代码段(动态生成 viewport)

      不用写 meta
      标签,该方法mobile-util.js根据
      dpr 自动生成,并以 html 标签中添加 data-dpr 和 font-size
      两只属于性值。

  • 优点:

    • 清晰度高,能落得物理像从的清晰度。
    • 能解决 DPR 引起的“1像素”问题。
    • 通向后相当于好,即便屏幕宽度增、PPI 增加该方案还适用。
  • 缺点:
    • 适配 js 需尽可能早进入,减少(避免)viewport 变化引起的重绘。
    • 好几Android机会丢掉 rem 小数部分。
    • 亟待预编译库进行单位转换。
  • 部分瞩目的地方

    • chrome当font-size小于12常常,rem会按照12来测算,设置基准值要考虑当下或多或少。
    • 比较小之背景图(比如有 icon)的 background-size 不要采取具体 rem
      数价值,裁剪后会见冒出边缘丢失。应利用和素等尺寸切图,设定
      background-size: contain|cover 来缩放。
  • 动态调整 rem 的方式如下:

    var fixScreen = function() {
        var metaEl = doc.querySelector('meta[name="viewport"]'),
            metaCtt = metaEl ? metaEl.content : '',
            matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
            matchWidth = metaCtt.match(/width=([^,\s]+)/);
    
        if ( !metaEl ) { // REM
            var docEl = doc.documentElement,
                maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大页面宽度
                dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
                scale = 1 / dpr,
                tid;
    
            docEl.removeAttribute('data-mw');
            docEl.dataset.dpr = dpr;
            metaEl = doc.createElement('meta');
            metaEl.name = 'viewport';
            metaEl.content = 'initial-scale=' + ratio + ',maximum-scale=' + ratio + ', minimum-scale=' + scale;
            docEl.firstElementChild.appendChild(metaEl);
    
            var refreshRem = function() {
                var width = docEl.getBoundingClientRect().width;
                if (width / dpr > maxwidth) {
                    width = maxwidth * dpr;
                }
                var rem = width / 16;
                docEl.style.fontSize = rem + 'px';
            };
    
            //...
    
            refreshRem();
        }
    }
    
  • 案例

    • demo
    • 淘宝网触屏版

4.响应式布局(pc & mobile)

  • 实现
    • 运 viewport meta 标签在手机浏览器上主宰布局
    • 以 Media Queries 适配对应样式
  • 要点
    • 响应式这种措施于国内挺少出重型企业的复杂的网站于运动端用这种方法去做,主要缘由是干活十分,维护性难
    • 适用于中小型的门还是博客类站点会采用响应式的办法从web
      page到web
      app直接一步到位,因为这么反而可以省去成本,不用再行特别为和谐的网站做一个web
      app的本。
  • 优点

    • Native APP:Objective-C or Java – 学习成本大
    • Hybrid APP: 外壳+Web APP,需安装。
    • 响应式Web APP:HTML5+JS+CSS – 门槛低,极容易达亲手,迭代快
    • 毋庸安装成本,迭代翻新容易

      图片 37

  • 案例

    • PC – http://qzone.com
    • Mobile – http://m.qzone.com
    • 响应式:PC & Mobile – http://qzone.com

4.响应式布局(pc & mobile)

  • 实现
    • 用 viewport meta 标签在大哥大浏览器上决定布局
    • 使 Media Queries 适配对应样式
  • 要点
    • 响应式这种办法在境内十分少来大型商厦之复杂性的网站以移动端用这种方式去开,主要由是工作挺,维护性难
    • 适用于中小型的流派还是博客类站点会利用响应式的法子从web
      page到web
      app直接一步到位,因为这样反而可以节约成本,不用再特别为投机之网站做一个web
      app的版本。
  • 优点

    • Native APP:Objective-C or Java – 学习成本高
    • Hybrid APP: 外壳+Web APP,需安装。
    • 响应式Web APP:HTML5+JS+CSS – 门槛低,极容易达到亲手,迭代快
    • 毋庸安装成本,迭代创新容易

      图片 38

  • 案例

    • PC – http://qzone.com
    • Mobile – http://m.qzone.com
    • 响应式:PC & Mobile – http://qzone.com

小结

  • 前三种植方案吗H5页面、手机页面、WAP页、webview页面移动常用方案
  • 先是栽方案不得不开一些列表等简单排列的体,面对再扑朔迷离的页面,往往需要绝对定位和比例等,尺寸及视觉稿有出入。
  • 其次种与老三栽方案免会见以及计划图有不同,第三种方案于第二栽方案再灵敏,有半点种植单位可用,rempx
  • 灵活运用min-height和min-width
  • 能够因此flex布局的不用以浮动和绝对定位(不便民页面扩展)

小结

  • 面前三种方案吗H5页面、手机页面、WAP页、webview页面移动常用方案
  • 率先种植方案不得不开片列表等简便排列的体裁,面对再复杂的页面,往往要绝对定位及比重等,尺寸和视觉稿有出入。
  • 老二栽和老三种植方案免会见与筹划图有两样,第三栽方案于第二种植方案再活,有星星点点栽单位可用,rempx
  • 灵活运用min-height和min-width
  • 能用flex布局的决不使用浮动和绝对定位(不便利页面扩展)

走支付规范

倒支付规范

字设置

  • 用无衬线字体
  • iOS 4.0+ 使用英文字 Helvetica Neue,之前的iOS版本降级使用
    Helvetica。中文字体设置也华文黑体STHeiTi。
    需补充说明,华文黑体并无在iOS的字体库中http://support.apple.com/kb/HT5878,
    但系统会自动将华文黑体 STHeiTi
    兼容命中网默认中文字体黑体-简或黑体-繁
  • 原生Android下中文字体与英文字都挑默认的甭管衬线字体

    body {
        font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    }
    

字设置

  • 应用无衬线字体
  • iOS 4.0+ 使用英文字 Helvetica Neue,之前的iOS版本降级使用
    Helvetica。中文字体设置也华文黑体STHeiTi。
    需补充说明,华文黑体并无设有iOS的字体库中http://support.apple.com/kb/HT5878,
    但系统会活动将华文黑体 STHeiTi
    兼容命中网默认中文字体黑体-简或黑体-繁
  • 原生Android下中文字体与英文字都挑默认的无论是衬线字体

    body {
        font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    }
    

基本功交互

  • 安装全局的CSS样式,避免图被的增长论弹来菜谱与选中文本的所作所为

    a, img {
        -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
    }
    
    html, body {
        -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */
        user-select: none;
    }
    

基本功交互

  • 安全局的CSS样式,避免图被的丰富准弹来菜谱和选中文本的所作所为

    a, img {
        -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
    }
    
    html, body {
        -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */
        user-select: none;
    }
    

越浏览器测试

浏览器兼容性:

图片 39

  • pc端模拟
    • PC端Chrome浏览器模拟手机调试页面,布局及几与真机上尚无异样了,只是真机可以见见底细节又多、操作实际环境
  • 真机调试
    • 微信、手机QQ、QQ浏览器:可以应用腾讯TBS
      studio、手机、usb数据线可以以测试线上页面
    • Android:通过手机chrome、PC
      chrome和usb;连接数据一致可在大哥大及chrome浏览器对页面进行调试。
  • BrowserSync 同步操作

    • 使用node.js command prompt 安装BrowserSync
    • 于node.js command prompt
      在如创服务器的目下面执行:browser-sync start –server
      –files=”*” 命令即可,表示创建一个服务器并监听该目录下之文书变动

      图片 40

      吃手机与计算机处于相同局域网下,可以用微机分享热点手机总是(如360不管线wifi +
      网卡)

  • 再多更详尽测试方案

    • 移动端前端开发调试
    • 各种 真机远程调试 方法
      汇总
    • 微信支付如何做地方调试?

跨越浏览器测试

浏览器兼容性:

图片 41

  • pc端模拟
    • PC端Chrome浏览器模拟手机调试页面,布局及几跟真机上没差别了,只是真机可以视底底细还多、操作实际环境
  • 真机调试
    • 微信、手机QQ、QQ浏览器:可以行使腾讯TBS
      studio、手机、usb数据线可以以测试线上页面
    • Android:通过手机chrome、PC
      chrome和usb;连接数据一致可以大哥大及chrome浏览器对页面进行调剂。
  • BrowserSync 同步操作

    • 使用node.js command prompt 安装BrowserSync
    • 每当node.js command prompt
      在如创服务器的目录下面执行:browser-sync start –server
      –files=”*” 命令即可,表示创建一个服务器并监听该目录下的文件变动

      图片 42

      叫手机及电脑处于同一局域网下,可以使用计算机分享热点手机总是(如360凭线wifi +
      网卡)

  • 重多重复详细测试方案

    • 移动端前端开发调试
    • 各种 真机远程调试 方法
      汇总
    • 微信支付如何做地方调试?

履行使

  • demo1(运用的凡率先种方案,但是小元素高度没有固定,而是从适应,以此适应图片的缩放。)

尽应用

  • demo1(运用的是第一栽方案,但是有些元素高度没有永恒,而是于适应,以此适应图片的缩放。)

参考资料

  • web app变革之rem
  • 手机淘宝的flexible设计及落实
  • MobileWeb 适配总结
  • 举手投足端高清、多屏适配方案
  • 浅谈移动Web开发
  • 响应式网页设计
  • 运动端适配方案(下)
  • Alloyteam移动开规范概述

参考资料

  • web app变革之rem
  • 手机淘宝之flexible设计以及落实
  • MobileWeb 适配总结
  • 倒端高清、多屏适配方案
  • 浅谈移动Web开发
  • 响应式网页设计
  • 移动端适配方案(下)
  • Alloyteam移动支付规范概述

展开阅读

  • mobileTech
  • CSS 以及 JS 注意事项
  • 至于webapp中之亲笔单位的一些捣腾
  • 倒前端开发和 Web
    前端开发的分别是呀
  • MDN:手机网页开发
  • MDN:在倒浏览器中应用viewport元标签控制布局
  • 手机/移动前端开发需要小心的20独要点
  • w3cplus响应式技术资源
  • Alloyteam Mars
  • 走WEB开发入门
  • 倒开发资源集合
  • The Mobile Web Handbook
  • 举手投足前端不得不垂询之html5 head
    头标签

进行阅读

  • mobileTech
  • CSS 和 JS 注意事项
  • 关于webapp中的仿单位之局部捣腾
  • 挪前端开发和 Web
    前端开发的区分是啊
  • MDN:手机网页开发
  • MDN:在走浏览器被采取viewport元标签控制布局
  • 手机/移动前端开发需要专注的20单要点
  • w3cplus响应式技术资源
  • Alloyteam Mars
  • 挪动WEB开发入门
  • 挪开发资源集合
  • The Mobile Web Handbook
  • 动前端不得不垂询的html5 head
    头标签

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注