HTML5移动端开发学习-职坐标

HTML5移动端开发学习

沉沙 2018-08-20 来源：阅读 2265 评论 0

摘要：本篇教程探讨了HTML5移动端开发学习，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5移动端开发学习，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

一、测试工具：1.Chrome 2.Opera Mobile
二、分辨率：一般现代手机最小320px，最大640px。
三、
全屏流体设计：
1.腾讯新闻：//xw.qq.com/
2.途牛旅游：//m.tuniu.com/

固屏类流体设计
1.京东商城：//m.jd.com/
2.淘宝网：//m.taobao.com/（全屏+固屏，导航一般用全屏）

四、<meta>标签，放在<head>之间
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-
scale=1.0,user-scalable=no">

name="viewport" //窗口设定
width=device-width //页面大小屏幕等宽
initial-scale=1.0 //初始缩放比例，1.0 表示原始比例大小
minimum-scale=1.0 //允许缩放的最小比例
maximum-scale=1.0 //允许缩放的最大比例
user-scalable=no //用户是否可以缩放，这里 no 表示不可以

五、rem
网页默认字体大小为16px，如果想设置为10px，用百分比则为10/16*100%=62.5%，所以在html中设置字体大小为
62.5%，即10px，那么下面的其它元素都用rem作为单位，那么10px就是1rem，14px就是14*1/10=1.4rem。
同理，如果里面一个p的字体大小想设置为24px，那么2.4rem。
兼容性：IE9+，以及现代主流浏览器。

六、图片自适应：
img{display:block;max-width:100%;}
七、字体自适应：（媒体查询）
/*媒体查询，大于480小于640*/
@media (min-width: 480px) and (max-width: 640px) {
#tour h2 {
font-size: .26rem;
}
}
/*媒体查询，大于320小于 480*/
@media (max-width: 480px) {
#tour h2 {
font-size: .18rem;
}
}

八、box-sizing属性（当给一个区块设置padding值时，区块的宽高可以保持不变）
div{box-sizing:border-box;}