移动端布局

1.纯粹的移动端,不需要考虑任何的pc上的效果

           a.百分比  不推荐使用

           b.rem  (推荐)

           c.viewpoint  (推荐)

           d.无宽布局(不是说永远的不给宽度)

2.响应式(一套网站,兼容N多设配)

1-c viewport  视窗  可视区尺寸

      在没有使用meta的时候,页面在放入到手机屏幕中展示,整个页面会缩小,但是如果使用了meta页面会按照正常的样式展示;

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      width 可视区域的宽度  固定尺寸(不需要px)/device-width;实际中只写640

      height 可视区域的高度  固定尺寸/device-height   实际一般不写

      initial-scale  初始缩放比例  ; 实际一般是.5859375

      maximun-scale  最大缩放比例; 实际一般是.5859375

    minimun-scale  最小缩放比例; 实际一般是.5859375

      user-saclable  用户缩放比例  ;实际只写no

    根据以上:在实际页面中<meta id="viewport" name="viewport" content="width=640,initial-scale=.5859375,maximum-scale=.5859375,minimum-scale=.5859375,user-scalable=no">,css中的代码尺寸按照实际图写,设计图给出多少px就是多少px,在手机端中就会实现自动布局,不需要使用任何的百分比;

   ios专用的:

       iso 9001  是一个标准,类似utf-8这种类型的标准

       ios:苹果的系统

      添加到主屏

           <meta name="apple-mobile-web-app-title" content="添加到主屏"> 

          <meta name="apple-touch-icon-precomposed" content="a.png">

       是否进入web app全屏模式   

          <meta name="apple-mobile-web-app-capable" content="yes">

       禁止将数字识别为电话号码

        <meta name="format-detection" content="telephone=no">

      -webkit-text-size-adjust: none;  将自动字号调整禁用

1-a  rem布局

       rem布局不要使用viewport布局中用到的内容mate;rem的大小是根据实际设计图中的尺寸进行计算的;计算方式如下:

      ch =  document.documentElement.clientWidth;屏幕实际宽度

       font-size = ch/每份大小 = 份数  (每份大小 一般都是按照40去计算,有兴趣的可以去了解一下,这里不详细说明)

一般的默认比值是16;如:在440设计图给出100px高度,那么在css代码中height:100px/16=6.25rem 

该方式的布局的适配比viewport更为全面一点,但是viewport跟简单一点;实际选择根据项目需要;

mobile-util.js  这个js 很重要,引入必须放在自己的css代码之后;这个js可以帮助自动实现布局的计算;

      rem布局时不需要自己计算初始的html的fontsize,直接根据16比值进行计算rem数值就行;

     viewport布局需要自己去写meta,但是缩放比例这些不要自己写,<meta id="viewport" name="viewport" content="width=640">;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、meta标签的效果 移动端页面一般会在head头部添加如下meta标签。 该meta标签是否添加对页面渲染的影...
    nimw阅读 3,683评论 0 5
  • 移动端布局 标签(空格分隔): 未分类 预备知识 Device Pixels 设备屏幕的物理像素,硬件指标,这个就...
    debt阅读 521评论 0 11
  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,599评论 5 80
  • 1 十月末的杭州 杭州的十月永远是雨水不停歇地从天上往地下落。最近的雨格外的温柔,雨伞遮不住这样温柔的雨,她会飘进...
    Planeed阅读 431评论 0 1
  • ONE 说分手的时候,我在心里认真的算了一下,我们在一起的时间。 我没有说为什么要分手,因为连我自己也不知道分手的...
    汤圆是圆的圆阅读 507评论 0 2