移动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;}