阅读 43

移动端|开发选择&技术解决方案

4. 移动端开发选择

4.1 移动端主流方案

  1. 单独制作移动端局面(主流)
  2. 响应式页面兼容移动端(其次)

4.2 单独制作移动端局面(主流)

通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面

4.3 响应式页面兼容移动端

通过判断屏幕宽度来改变样式,以适应不同终端

如三星官网

缺点:制作很麻烦,需要花很大精力调兼容性问题

5. 移动端技术解决方案

5.1 移动端游览器

移动端游览器基本以wekit内核为主,所以只考虑webkit兼容性问题。

简单来说 我们可以放心使用H5标签和CSS3样式

同时游览器私有前缀只需添加webkit

5.2 CSS初始化(normalize.css)

normalize.css

作用:

  • 保护了有价值的默认值
  • 修复了游览器的bug
  • 是模块化的
  • 拥有详细的文档

5.3 CSS3盒子模型(box-sizing)

  • 传统模式宽度计算: 盒子的宽度 = CSS中设置的width+border+pandding
  • CSS3盒子模型: 盒子的宽度=CSS中设置的宽度width里面包含了border和pandding,所以后两者不再撑大盒子
// 让盒子变为css3盒子模型,pandding和border不会再撑大盒子
box-sizing:border-box
复制代码

5.4 特殊样式

         a  {
            /* CSS3盒子模型 */
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            /* 设置transparent 完成透明 */
            -webkit-tap-highlight-color: transparent;
            /* 在ios加入这个属性才能给按钮和输入框自定义样式 */
            -webkit-appearance: none;
            /* 禁用长按页面的弹出菜单 */


        }
         /* 禁用长按页面的弹出菜单 */
        img,a {
            -webkit-touch-callout: none;
        }
复制代码
文章分类
前端
文章标签