移动web开发1

学习了viewport视口及相应的属性：
viewport:视口属性 该属性只在移动端浏览器上才有用。
name=”viewport”告诉浏览器 我这个meta标签设置的是viewport属性
content设置的是属性的值 属性名不能乱写 有固定的取值
width:宽度 device-width(设备的宽度) 宽度不需要给单位
height:高度一般不设置 让内容撑大
initial-scale:视口默认的缩放比例 一般默认为1.0
user-scalable:设置是否支持缩放 一般设置的使no false也可以
maximum-scale:最大的缩放值 1.0
minimum-scale:最小的缩放值 1.0

sublime快捷键 meta:vp+tab 直接生成 lorem+tab 生成占位字符

移动端:
手指点击 清除默认的 高亮效果 透明 -webkit-tap-highlight-color:transparent
保证盒子内容不变 box-sizing:content-box
保证盒子大小不变 内容可能会变 box-sizing:border-box
移动端 现在 扁平化 大行其道 除了锤子手机 都是扁平化 border:0;
移动端 有一些 浏览器 会默认给 input标签 添加一些 特有的样式 比如 3d 高光效果 -weblit-appearance:none

初始化样式：
/* 通用样式 */
*,
::before,
::after{
    font-size: 14px;

    /*  */
    margin: 0;
    padding: 0;

    /* 点击高亮效果 *//* 手指点击 清除默认的 高亮效果 透明 */
    -webkit-tap-highlight-color: transparent ;

    /* 盒子模型 */
    /* 样式输入完毕 在后面tab */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    /* 统一设置文字  sans-serif 移动端 的默认字体 */
    font-family: '微软雅黑',sans-serif;
}

/* input标签 去掉默认样式 */
input{
    border: none;
    -webkit-appearance: none;
}

/* a标签的下划线 */
a{
    text-decoration: none;
}

/* 去掉小圆点 */
ol,ul{
    list-style: none;
}

/* 清除浮动 */
.f_l{
    float: left;
}
.f_r{
    float: right;
}

/* 清除浮动 */
.clearfix::before,
.clearfix::after{
    content:'';
    display: block;
    line-height: 0;
    height: 0;
    visibility: hidden;
    clear: both;
}