移动端开发
移动端开发
1、
有一个像素比：window.devicePixelRatio,像素比就是把一个像素放大至几像素去显示，比如说：像素比是2，一像素就会以2像素的形式显示。
2、移动端禁止识别电话号码和邮箱号码
<meta name=”format-detection” content=”telephone=no,email=no”>
如果有需求需要识别拨打电话，就可以实现拨打电话功能了
<a href=”tel:电话号码” >
<a href=”mailto:邮箱地址” >
在a input button标签点击时会有阴影显示，在css中设置成全透明就可以了
在iOS系统中，按钮会默认有圆角显示，在css中去除
字体设置Body{font-family：helvetica}
禁止文字缩放：body *{-webkit-text-size-adjust:100%;}
选中文字设置：body *{-webkit-user-select：none;}
其他问题：
1、 font-boosting
2、 viewport适配
3、 rem适配
弹性盒模型
1、新版的弹性盒模型：是在父级标签上添加display: flex;/*
老版弹性盒模型, 在父级标签上要使用-webkit-box */display: -webkit-box;
2、 在父级标签使用了弹性盒模型的时候，在父级标签中会形成一条个主轴，x方向（主轴）和y方向（侧轴）
3、 定义弹性盒模型主轴方向：
（新版）flex-direction:row/column
（老版）-webkit-box-orient:horizontal（水平方向）/vertical（垂直方向）
4、 主轴上元素的排列方向
（新版）flex-direction:row-reverse/column-reverse（逆向）从右边（下边）开始逆向排序
（老版）-webkit-box-direction:normal（正常），reverse（反向）从左边（上边）开始逆序排列
5、 主轴方向富裕空间处理（多出来的空间）
（新版）justify-content：flex-start（元素在主轴开始的位置，富裕空间在主轴结束位置）
（新版）justify-content：flex-end（富裕空间在主轴开始的位置，元素在主轴结束位置）
（新版）justify-content：center（元素在主轴中间的位置，富裕空间在两侧位置）
（新版）justify-content：space-between（富裕空间平均分配在每两个元素之间）
（新版）justify-content：space-around（富裕空间平均分配在每个元素两侧）
（老版）-webkit-box-pack:start（元素在主轴开始的位置，富裕空间在主轴结束位置）
（老版）-webkit-box-pack: end（富裕空间在主轴开始的位置，元素在主轴结束位置）
（老版）-webkit-box-pack: center（元素在主轴中间的位置，富裕空间在两侧位置）
（老版）-webkit-box-pack: justify（富裕空间平均分配在每两个元素之间）
6、 侧轴方向富裕空间管理
（新版）align-items:flex-start（元素在侧轴开始的位置，富裕空间在侧轴结束位置）
（新版）align-items:flex-end（富裕空间在侧轴开始位置，元素在侧轴结束的位置）
（新版）align-items:center（元素在侧轴中间的位置，富裕空间在侧轴两侧位置）
（老版）-webkit-box- align:start（元素在侧轴开始的位置，富裕空间在侧轴结束位置）
（老版）-webkit-box- align: end（富裕空间在侧轴开始的位置，元素在侧轴结束位置）
（老版）-webkit-box- align: center（元素在侧轴中间的位置，富裕空间在两侧位置）
7、 弹性盒模型的弹性空间（加在自己身上的）
（新版）flex-grow：1,
（老版）-webkit-box-flex：1
子元素的宽度=盒子的宽度*（该子元素flex-grow的值/所有元素flex-grow的值的和）
8、 元素的具体位置的设置（加在自己身上的）
（新版）order：数值，值越小越靠前，可以接受0和负值。
（老版）-webkit-box-ordinal-group：数值，值越小越靠前，接受0和负值默认处理为1。
媒体查询
1、所有媒体类型
a、在彩屏设备上，box的显示背景为红色
@media screen {
.box{background:red}
}
B、在所有设备上，box的显示背景为红色
@media all {
.box{background:red}
}
c、仅仅在彩屏设备下，宽度大于等于500的时候识别
@media only screen (min-width:500px ){
.box{background:red}
}
d、仅仅在彩屏设备下，宽度小于等于500的时候识别
@media only screen (max-width:500px ){
.box{background:red}}
！！！注意：screen和后面的括号要有一个空格才可以识别
E、@media (orientation:protrait) {}在设备竖屏的时候识别，@media (orientation:landscape){}在设备横屏的时候识别(原理是检测可视区的宽高比，一般不用此方法识别)
