900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 移动端web开发--开发选择 技术解决方案 常见布局

移动端web开发--开发选择 技术解决方案 常见布局

时间:2019-11-06 15:10:27

相关推荐

移动端web开发--开发选择 技术解决方案 常见布局

1.移动端开发选择

1.1 移动端主流方案

1.单独制作移动端页面(主流)

2.响应式页面兼容移动端(其次)

1.2单独移动端页面(主流)

通畅在网址域名前加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。

1.3响应式兼容PC移动端

通过判断屏幕宽度来改变样式,以适应不同终端。如:三星官网

缺点:制作麻烦,需要花大量精力去调兼容性问题

2.移动端技术解决方案

2.1移动端浏览器

移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题可以放心使用H5标签和CSS3样式浏览器的私有前缀只需要考虑添加webkit即可

2.2CSS初始化 normalize.css

移动端css初始化推荐使用 normalize.css

官网地址:http://necolas.github.io/normalize.css/

2.3CSS3盒子模型 box-sizing

传统模式宽度计算:盒子宽度=css中设置的width+border+paddingcss3盒子模型:盒子宽度=css中设置的宽度width里面包含了border和padding,也就是说,我们的css3中的盒子模型,padding和border不会撑大盒子了。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 有了box-sizing: border-box;这句话,就让盒子变成了CSS3盒子模型 *//* box-sizing: content-box; 加这句话就是传统盒子 */box-sizing: border-box;width: 200px;height: 200px;background-color: #16ccec;padding: 10px;}</style></head><body><div></div></body>

怎么选择:

移动端可以全部用css3盒子模型PC端如果需要完全兼容,我们就用传统模式,如果不考虑兼容性,就选择css3盒子模型

2.4特殊样式

3.移动端常见布局

移动端技术选型

1.单独制作移动端页面(主流)

流式布局(百分比布局) 参考某东移动端首页flex弹性布局(推荐) 参考携某移动端首页less+rem+媒体查询布局 参考某宁移动端首页混合布局

2.响应式页面兼容移动端(其次)

媒体查询bootstarp 参考某里百秀移动端首页

3.1流式布局(百分比布局)

流式布局,就是百分比布局,也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩,不收固定像素的限制,内容向两侧填充。流逝布局方式是移动web开发使用的比较常见的布局方式设置最大宽度max-width和最小宽度min-width

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。