Gauss Zhou

# 移动端

# 移动端基础

/* 新的盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 清除点击高亮 */
-webkit-tap-highlight-color: transparent;
/* 清除默认外观 */
-webkit-appearance: none;
/* 禁用长按时出现菜单 */
img,
a {
  -webkit-touch-callout: none;
}

# 视口问题

  • 布局视口 设备默认的视口
  • 视觉视口 用户当前观看的网页区域
  • 理想视口(ideal viewport) 对设备来讲，最理想的视口尺寸，需要手动添加 meta 标签设置相关属性，让设备宽度和布局宽度保持同步
<!-- 标准写法 -->
<meta
  name="viewport"
  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta name="viewport">标签的属性 属性说明
width=device-width 设置视口宽度=设备宽度
initial-scale 初始缩放比
maximum-scale 最大缩放比
minimum-scale 最小缩放比
user-scalable 用户是否可以缩放

# 像素问题

  • 屏幕像素比，1 pxiel 实际覆盖的物理像素点的个数，通常 PC 端是 1:1，移动端是 1:2 部分手机 1:3
  • 为什么？移动端为了提高屏幕的细腻感需要提高单位面积的像素个数，为了避免放缩后产生失真，需要进行比例化处理，让图片实际像素和移动端对应。
  • 二倍图处理方法， 准备100*100图片，background-size: 50px; 移动端实际物理像素为100*100

# 单位问题

长度单位 重要性 作用
cm 了解 绝对单位，一厘米
px 重要 绝对单位，一个像素
rem 重要 相对单位，html 的字体大小
em 了解 相对单位，相对元素自身的字体大小 ，如果自身没有设置就找父元素
vw 一般 相对单位，视窗宽度的 1%
vh 一般 相对单位，视窗高度的 1%

# 方案选择

技术选型 举例 优缺点
制作响应式页面来兼容移动端 www.samsung.com 兼容性麻烦
单独制作移动端页面 m.jd.com m.taobao.com m.suning.com 工作量可预期

# 媒体查询

/* 基本写法 */
@media mediatype and|not|only (media feature){
  css-code;
}
/* 举个例子 */
@media screen and (max-width: 800px){
  html{ font-size:8px}
}
mediatype 媒体类型 解释说明
all 用于所有设备
print 用于打印机和打印预览
screen 用于设备的屏幕，重要
关键字 解释说明
and 将多个媒体特效连接，相当于“且”的意思
not 排除某个媒体特性
only 指定某个特定的媒体特性
媒体特性 解释说明
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面可见区域的最小宽度
max-width 定义输出设备中页面可见区域的最大宽度

# 等比放大布局

  • 方案 1 Rem

① 假设设计稿是 750px
② 假设我们把整个屏幕划分为 15 等份（划分标准不一可以是 20 份也可以是 10 等份）
③ 每一份作为 html 字体大小，这里就是 50px
④ 那么在 320px 设备的时候，字体大小为 320/15 就是 21.33px
⑤ 用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的

  • 方案 2 (已经过时)

https://github.com/amfe/lib-flexible (opens new window)

① 使用 flexbable.js 会自动调整 rem 的大小
② flexable.js 把屏幕划分为 10 等分，我们按照设计稿的 10 等分来计算具体需要多少 rem 即可

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;
  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();
  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 10;
    docEl.style.fontSize = rem + "px";
  }
  setRemUnit();
  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });
  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

# 响应式布局

  • Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

  • 创建 html 骨架结构

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 注意上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ -->
    <title>Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>
  • 栅格嵌套 col > row
<!-- 列嵌套 -->
  <div class="col-sm-4">
    <div class="row">
          <div class="col-sm-6">小列</div>
          <div class="col-sm-6">小列</div>
    </div>
</div>
  • 列偏移 offset
  <!-- 列偏移 -->
  <div class="row">
      <div class="col-lg-4">1</div>
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>
  • 列排序 pull push
  <!-- 列排序 -->
  <div class="row">
      <div class="col-lg-4 col-lg-push-8">左侧</div>
      <div class="col-lg-8 col-lg-pull-4">右侧</div>
  </div>

移动端基础
视口问题
像素问题
单位问题
方案选择
媒体查询
等比放大布局
响应式布局