移动web开发（一）

2017-04-23 本文已影响37人枫丶筱

1.流式布局

定义：就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

这样的布局方式就是移动web开发使用的常用布局方式

2.viewport(视口)

视觉窗口，简称：视口；

使用方式：

content :可设置参数

width：              |    宽度设置的是viewport宽度，可以设置device-width特殊值(一般设置成device-width)
initial-scale：      |    初始缩放比，大于0的数字
maximum-scale：      |    最大缩放比，大于0的数字
minimum-scale：      |    最小缩放比，大于0的数字
user-scalable：      |    用户是否可以缩放，yes或no（1或0）；（一般设置成no）

基本使用代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0，user-scalable=0">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

使用快捷键： meta:vp+tab 可快捷生成；

网页适配的两种方式

方式一：（主流方式）

<meta name="viewport" content="width=device-width,initial-scale=1.0，user-scalable=0">

方式二：使用js判断（淘宝使用）

window.onresize = function () {
        responsive();
    };
    responsive();

    function responsive() {
        console.log("非常消耗性能的代码");
        if (client().width > 960) {//是电脑
            document.body.style.backgroundColor = "red";
            document.body.innerHTML = "computer";
        } else if (client().width > 640) {//是平板
            document.body.style.backgroundColor = "green";
            document.body.innerHTML = "tablet";
        } else {//手机
            document.body.style.backgroundColor = "yellow";
            document.body.innerHTML = "mobile";
        }
    }

    function client() {
        return {
            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
        };
    }

然后，在js中动态设置 viewport 设置缩放比

3.移动端基础属性css设置

1.高亮显示

 /* -webkit-tap-highlight-color: transparent;*//*透明 其实就是不显示颜色*/
    -webkit-tap-highlight-color: red;

代码演示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
    <title></title>
    <style>
        body,html{
            padding: 0;
            margin: 0;
        }
        a{
            display: block;
            height: 100px;
            width: 100px;
            /*怎么定义高亮的颜色*/
         /* -webkit-tap-highlight-color: transparent;*//*透明 其实就是不显示颜色*/
            -webkit-tap-highlight-color: red;
        }
    </style>
</head>
<body>
<a href="javascript:;">gdfgdfg</a>
</body>
</html>

演示效果：

2017_02_08_11_37_05_37.gif

注意：此属性只有在移动端有效

2.设置box-sizing

/*设置所有的盒子的宽度以边框开始计算*/
    -webkit-box-sizing: border-box;
    /*要兼容webket浏览器内核厂商  这种情况一般是老的移动端浏览器*/
    box-sizing: border-box;

演示代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
    <title></title>
    <style>
        body,html{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100%;
            height: 200px;
            background: #00ff00;
            border: 20px solid red;
            padding:0 20px;
            -webkit-box-sizing: border-box;
        }
        ul,ol{
            list-style:none;
        }
        a{
            text-decoration: none;
            color:#333;
        }
        a:hover{
            colo:#333;
        }
        input,textarea{
            border:none;
            outline:none;
            resize:none;/*不允许用户调整元素大小拉伸。*/
            -webkit-appearance:none; /* 清除浏览器默认的属性*/
        }
    </style>
</head>
<body>
    <div></div>
<input  type="search">
</body>
</html>

效果展示:

2017_02_08_11_41_34_632.gif

3.清除浏览器给input自带的样式

/*特殊的属性定义  清除浏览器给input自带的样式*/
    -webkit-appearance: none;/*组建默认的样式为空*/

4.基础公共样式

//清除浮动
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.clearfix::after,
.clearfix::before{
    content: ".";
    line-height: 0;
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

公共.base.css样式：

/*reset css  重置默认的一些样式 浏览器自带的  目的是保持各种终端显示一致*/
/*所有的标签和伪类  before after*/
*,
::before,
::after{
    padding: 0;
    margin: 0;

    /*在移动端特殊的设置 */
    /*点击高亮效果*/
    -webkit-tap-highlight-color: transparent;
    /*设置所有的盒子的宽度以边框开始计算*/
    -webkit-box-sizing: border-box;
    /*要兼容webket浏览器内核厂商  这种情况一般是老的移动端浏览器*/
    box-sizing: border-box;
}
body{
    font-size: 14px;
    color: #333;
    font-family: "MicroSoft YaHei","sans-serif";/*是设备默认的字体*/
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333;
}
a:hover{
    color: #333;
}
input,textarea{
    border: none;
    outline: none;
    resize: none;
    /*特殊的属性定义  清楚浏览器给input自带的样式*/
    -webkit-appearance: none;/*组建默认的样式为空*/
}
/*common css  也就是我们共用的css*/
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.clearfix::after,
.clearfix::before{
    content: ".";
    line-height: 0;
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
.m_r10{
    margin-right: 10px;
}

.m_l10{
    margin-left: 10px;
}
.m_t10{
    margin-top: 10px;
}
.m_b10{
    margin-bottom: 10px;
}
.mianColor{
    color: #d8505c;
}