web适配手机端开发总结 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 网站建设 >

web适配手机端开发总结

发表时间:2018-3-16

发布人:葵宇科技

浏览次数:18

现在手机端也业务要多于pc端,如何做手机端的web页面也成了许多web前端工程师的必修课,以下是我总结的一些心得,大家茶余饭后研读一下,看看能不能涨涨姿势。

适配手机端我主要总结3点:

1. 在页面顶部加meta,它的大概意思就是让页面1:1显示,用户禁止缩放,加载html页面的head中 代码如下。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

2.布局用百分比/rem,这个就不多解释了,只是把原来的px换成%或rem,尝试一下就知道了。值得一提的是rem这个单位直接用不太好,因为你要精确到小数点后面三四位,所以大家要用的话,百度一下rem.js,网上有很多版本,自己下载一个src引入,这样就不用精确到小数点好几位了。

div{
    width:80%,
    height:200px;
    font-size:1rem
}

3.框架推荐:uniapp或taro

uniapp:可以自行百度一下,一套代码同时可以编译八端,天生适合移动端开发,其自带rpx可以让开发者通过rpx布局。

taro:是京东推出的跨平台框架,它可以编译成RN、H5等,它使用react开发,也是移动端开发的首选。

相关案例查看更多