移动端响应式的处理:
首先需要将三个viewport放入:
1.告诉浏览器按照多少的大小来渲染页面,不允许用户手动缩放屏幕.
2.告诉浏览器不要把数字当做电话号码.如果需要当做电话号码处理:
<a href="tel:122121212">联系我们</a> //电话号码
<a href="sel:122121212">联系我们</a> //发送信息
3.safari设置全屏显示.
1.设计师给前端的是640px效果图;
2.按照640px尺寸将所有图片切出来;
3.布局的时候宽度不设置固定宽度;
4.其余的除了宽度都可以按照效果图的一半来布局.宽度不设置固定,让宽度随着屏幕大小自适应
比如:1.效果图上的文字是24px,我们布局的时候写成12px;
2.效果图上的高度是100px,我们布局的时候写50px.
3.配图以及缩略图的宽高,margin,padding(取一半)都可以固定.
5.如果需要调整不同尺寸显示效果的话,用@media进行调整.
@media由两部分组成:
1.media type(媒体类型):all-所有设备 print-打印设备 screen-电脑或者手机显示器
2.media query(媒体特性):width,height,max-width,min-width,orientation(检测横竖屏Portrait竖/landscape横,H5不能禁用横竖屏,只能监听横竖屏切换,但是禁止不了横竖屏切换,浏览器没有提供这个方法)
引入方式:
1.嵌入样式中
.bg{height:200px;}
@media all and (min-width:480px) and (max-width:630px){
.bg{height:240px;}
}
@media all and (min-width:640px) and (max-width:719px){
.bg{height:240px;}
}
ps:苹果6以下都是320px,苹果6是375px,plus:414px,360px,480px,.....720左右pad
2.link不同样式,根据不同屏幕设置不同的样式表:首先把两个样式都加载,然后根据条件用不同的样式渲染.
<link href = "phone.css" media="all (max-width:719px)"/>
<link href = "pad.css" media="all (min-width:719px)"/>
在ios看到100*100,实际上原图是200*200.
比如外面最大的盒子的内填充是20px,需要设置成10px.如果在苹果设备图片出现失真,找设计师要比640px大一点的图.效果图的高度:300px,做的高度:300*2/3=200px
