移动 Web 项目前端脚手架 #7

ghost · 2017-04-02T05:47:29Z

2017-04-02 发布，最后更新于 2017-04-08

对 HTML 的设置

<!DOCTYPE html> 设置正确的浏览器渲染模式
<html lang="zh-cmn-Hans"> 设置页面内容的语言为简体中文；<html lang="zh-cmn-Hant"> 为繁体中文；<html lang="en"> 为英文。这么写的原因
<meta charset="UTF-8"> 设置编码格式为 UTF-8
<meta name="format-detection" content="telephone=no" /> 当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接，iPhone 上默认 telephone 设置为 yes
<meta name="format-detection" content="email=no" /> 忽略 Android 平台中对邮箱地址的识别
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 详情使用参考 MDN-在移动浏览器中使用 viewport 元标签控制布局
<link rel="icon" href="**/*.*" /> 设置 icon

浏览器重置样式设置

1.可重置点击链接时出现的高亮颜色及 outline

        * {
          outline: 0;
          -webkit-tap-highlight-color: transparent;
        }

参考 -webkit-tap-highlight-color

2.text-size-adjust

        html {
          -webkit-text-size-adjust: 100%;
          -moz-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
        }

参考 text-size-adjust

3.大屏幕下 body 水平居中

        body {
          margin: 0 auto;
          padding: 0;
          max-width: 540px;
        }

4.设置图片无法被选中

        img {
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
        }

参考 user-select

公有样式设置

style.css

1.使用面向属性的 CSS

        .fs12 {
          font-size: 12px;
        }
        .fs14 {
          font-size: 14px;
        }
        .fw200 {
          font-weight: 200;
        }
        .fw600 {
          font-weight: 600;
        }

2.clearfix 清除浮动

        .clearfix {
          zoom: 1;
        }
        .clearfix:after {
          content: "";
          display: block;
          height: 0;
          visibility: hidden;
          clear: both;
        }

3.0.5px 边框实现

        .bd0_5 {
          position: relative;
        }
        .bd0_5:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 200%;
          height: 200%;
          box-sizing: border-box;
          border: 1px solid transparent;
          transform-origin: left top;
          transform: scale(0.5);
          z-index: -1;
        }

4.遮罩层样式

        .shade {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          min-width: 100%;
          min-height:100%;
          background: rgba(0, 0, 0, 0.7);
          z-index: 800;
        }

5.人民币符号

        .rmb:before {
          content: '￥';
          vertical-align: baseline;
        }

集成手淘 rem 方案

阅读源码可以知道，如果我们设置了 viewport 元数据，那么 dpr = 1 / scale；如果手动设置 flexible，则 dpr 取决于设置值；如果两者都不设置，那么 flexible.js 会根据 IOS/Android 平台去动态生成 meta 标签并设置 dpr（此时 dpr 值可能为 1~3）及缩放比例。

建议使用修改源码后的 rem.js，设置 viewport 视口，在锁定缩放比例的同时，还可以使用 <html data-dpr="1~3"> 提供的 class 过滤功能。

The text was updated successfully, but these errors were encountered:

KkkkKernc · 2017-04-05T01:43:05Z

讲道理还可以有一个0.5像素边框的东西：

.bd1px_scale {
  position: relative;
}
.bd1px_scale:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  box-sizing: border-box;
  border: 1px solid transparent;
  transform-origin: left top;
  transform: scale(0.5);
  z-index: -1;
}

这种比图片的好处就是可以有圆角2333
不过需要是写成2倍的弧度

ghost · 2017-04-05T03:21:30Z

@KkkkKernc，感谢补充，后面我会加进去

KkkkKernc · 2017-04-06T07:10:13Z

其实我感觉人民币符号那个东西不设字体怕是要好点
有时候跟原本字体不一样就很烦

ghost · 2017-04-08T09:01:05Z

@KkkkKernc 恩，伪元素会继承宿主元素字体

Dongwei0516 · 2017-05-02T11:17:47Z

niubility

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

移动 Web 项目前端脚手架 #7

移动 Web 项目前端脚手架 #7

ghost commented Apr 2, 2017 •

edited by ghost

Loading

KkkkKernc commented Apr 5, 2017 •

edited by ghost

Loading

ghost commented Apr 5, 2017

KkkkKernc commented Apr 6, 2017

ghost commented Apr 8, 2017

Dongwei0516 commented May 2, 2017

移动 Web 项目前端脚手架 #7

移动 Web 项目前端脚手架 #7

Comments

ghost commented Apr 2, 2017 • edited by ghost Loading

对 HTML 的设置

浏览器重置样式设置

公有样式设置

集成手淘 rem 方案

KkkkKernc commented Apr 5, 2017 • edited by ghost Loading

ghost commented Apr 5, 2017

KkkkKernc commented Apr 6, 2017

ghost commented Apr 8, 2017

Dongwei0516 commented May 2, 2017

ghost commented Apr 2, 2017 •

edited by ghost

Loading

KkkkKernc commented Apr 5, 2017 •

edited by ghost

Loading