移动端开发的简单适配方案
2017-06-07 20:59
459 查看
现在是移动端的天下啊,但是在做移动端开发的时候会遇到很多坑,适配是必须要做的,这里总结一下自己平时写移动端页面的两种简单处理办法,希望能够帮到大家:
第一种:利用js来计算不同设备中的文字大小
以上代码中如果设计稿是750的记得把6.4改成7.5
第二种及时利用媒体查询来设置
其实这两种办法只是简单的处理,如果要更好的处理,大家可以参考各大网站的方式,如:淘宝,网易等。
这是文字的适配,在正常些样式的时候设计稿的真是尺寸一半即为我们需要用到的尺寸。
这只是说了文字的适配,移动端的适配要想做到更好,最为重要的就是图片的适配,这里就不多说,大家有兴趣可以自行google。
第一种:利用js来计算不同设备中的文字大小
var deviceWidth = document.documentElement.clientWidth; if(deviceWidth > 640) deviceWidth = 640; document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
以上代码中如果设计稿是750的记得把6.4改成7.5
第二种及时利用媒体查询来设置
html { font-size: 100px; background-color: #f9f9f9; } @media screen and (min-width: 320px) { html { font-size: 50px; } } @media screen and (min-width: 360px) { html { font-size: 56.25px; } } @media screen and (min-width: 375px) { html { font-size: 58.59375px; } } @media screen and (min-width: 400px) { html { font-size: 62.5px; } } @media screen and (min-width: 414px) { html { font-size: 64.6875px; } } @media screen and (min-width: 440px) { html { font-size: 68.75px; } } @media screen and (min-width: 480px) { html { font-size: 75px; } } @media screen and (min-width: 520px) { html { font-size: 81.25px; } } @media screen and (min-width: 560px) { html { font-size: 87.5px; } } @media screen and (min-width: 600px) { html { font-size: 93.75px; } } @media screen and (min-width: 640px) { html { font-size: 100px; } } @media screen and (min-width: 680px) { html { font-size: 106.25px; } } @media screen and (min-width: 720px) { html { font-size: 112.5px; } } @media screen and (min-width: 760px) { html { font-size: 118.75px; } } @media screen and (min-width: 800px) { html { font-size: 125px; } } @media screen and (min-width: 960px) { html { font-size: 150px; } }
其实这两种办法只是简单的处理,如果要更好的处理,大家可以参考各大网站的方式,如:淘宝,网易等。
这是文字的适配,在正常些样式的时候设计稿的真是尺寸一半即为我们需要用到的尺寸。
这只是说了文字的适配,移动端的适配要想做到更好,最为重要的就是图片的适配,这里就不多说,大家有兴趣可以自行google。
相关文章推荐
- 移动端开发适配2种方案总结
- 2018移动端页面适配最新方案直接写px-通过gulp搭建一体化的移动端开发环境
- 最简单的移动端适配方案
- 站在安卓程序员的角度撸一遍Java Web移动端开发“屏幕适配方案”
- 一种简单的移动端屏幕适配方案
- 08-移动端开发教程-移动端适配方案
- 移动端高清、多屏适配方案 [来源:http://div.io/topic/1092]
- 【Unity开发】Unity2D多分辨率屏幕适配方案(IOS露出天空盒解决办法)
- 移动端多屏适配方案
- iOS开发屏幕适配问题解决方案
- 移动端H5页面高清多屏适配方案
- (二)移动端web开发:处理简单手势
- 让Android屏幕适配开发更简单-我就是传说中的Google百分比布局支持库
- jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发
- webapp移动端适配方案之“手淘框架flexible”
- 移动端H5页面高清多屏适配方案(经典)
- 为移动端开发提供纯前端的路由方案
- 移动端高清、多屏适配方案
- android开发之移动端屏幕适配随谈
- android:使用SurfaceView游戏开发简单屏幕适配方法