移动端网站如何布局

<!--[了解 像素基础知识]
   ① 设备物理像素：设备上一个像素点
   ② 设备无关像素：可以与物理像素通过dpr转换。（当dpr为1时，设备无关像素=设备物理像素）
   ③ CSS像素：CSS中使用的抽象概念。当页面没有缩放时，CSS像素=设备无关像素。

设备像素比dpr = 物理像素/设备无关像素
  -->

<!--[重点 viewport]
   设置布局viewport的各种信息：
   width=device-width：布局viewport宽度等于设备宽度
   initial-scale=1.0：默认缩放比为1(目的：让CSS像素=设备无关像素)
   maximum-scale=1：最大缩放比为1
   minimum-scale=1：最小缩放比为1
   user-scalable=no：用户禁止缩放(iOS10中的sarifi浏览器失效)
  -->

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/>
  
  <!--
   禁止设备将疑似手机号/邮箱,进行识别。取消点击拨打电话等事件
  -->
  <meta name="format-detection"content="telephone=no,email=no"/>
  
  <!--
   iOS 添加到主屏幕时，WebAPP的标题
  -->
  <meta name="apple-mobile-web-app-title" content="我的第一个WebAPP">
  
  <!--
   iOS 添加到主屏幕时，WebAPP的icon图标
  -->
  <link rel="apple-touch-icon-precomposed" href="http://st.360buyimg.com/m/images/apple-touch-icon.png?v=jd201703162005" />
  
  <!--
   iOS 添加到主屏幕时，启用WebAPP全屏模式，删除顶端地址栏和底部工具栏
  -->
  <meta name="apple-mobile-web-app-capable" content="yes" />

<!--
   iOS 添加到主屏幕时，WebAPP顶部状态的样式
   可选值：
   black：黑色
   default：默认白色
   black-translucent(半透明)：网页内容充满整个屏幕，顶部状态栏会遮挡网页头部。
  -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  
  <!--
   设置浏览器，时候最新的IE和chrome去编译
   >>> 不是手机端专用，PC网页一般也需要设置
  -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  
  <!-- 其他几个meta标签，了解即可
   ① 设置浏览器过期时间，-1表示时刻过期，及每次刷新都要请求最新数据
   ② 是否设置浏览器缓存，否
   ③ 是否从本机读取缓存文件，否
  -->

<meta http-equiv="Expires" content="-1">
        <meta http-equiv="Cache-Control" content="no-cache">
        <meta http-equiv="Pragma" content="no-cache">

/* 【手机端样式选择】
     * 1、一般手机均不支持微软雅黑，中文字体无需设置，使用手机默认即可；
     * 2、英文字体，一般选择font-family:Helvetica;
     */
    font-family:"宋体",Helvetica,sans-serif;
    
    /* 禁止选中文本(如无文本选中需求,此为必选项)
     * 1、手机端禁止长按选中；
     * 2、电脑端禁止鼠标选择；
     */
          -webkit-user-select: none; 
          -moz-user-select: none;
          
          /* 去除表单默认外观
           * 手机、电脑均可使用；
           */
          -webkit-appearance:none;
          -moz-appearance: none;
          appearance: none;
   }

/* 禁止长按链接与图片弹出菜单 */
   a, img {
       -webkit-touch-callout: none;
   }
   
   
   /* 修改input的placeholder默认样式
    * 修改input获得焦点时placeholder样式
    */
   /*谷歌*/
   input::-webkit-input-placeholder{color:red;}
   input:focus::-webkit-input-placeholder{color:green;}
   /*火狐19+*/
   input::-moz-placeholder{color:red;}
   input:focus::-moz-placeholder{color:green;}
   /*IE 10+*/
   input::-ms-input-placeholder{color:red;}
   input:focus::-ms-input-placeholder{color:green;}

<!--
    打电话/发短信/发邮件
   -->
   <a href="tel:0535-10086">
   打电话给:0535-10086
   </a>
   <a href="sms:10086">发短信给: 10086</a>
   <a href="mailto:jianghao@jerei.com">发邮件给: jianghao@jerei.com</a>