谈谈关于前端开发网页适配手机的相关设置

来源:互联网 发布:淘宝社区茶叶包装盒 编辑:程序博客网 时间:2024/06/04 18:41

虽然说本人是做前端开发的,但是也开发过几个Android项目,还是比较关注移动端的,个人感觉以后用网页开发手机App是一种趋势,h5的兴起也正说明了这一点,也正是有了h5,让前端开发者也能开发手机,好了,废话不多说,进入正题,对网页的适配手机本人暂时用到了3中方式,3句代码,
第一句:

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

暴力手段,强制让网页适配手机.就是说如果你用设计了一个网页,然后加入这句代码,那么你网页上所有内容都挤在手机小小的屏幕上,这种方式本人一般用于网页上的header和table;

第二句:

font-size: 1.3rem;

可能刚接触前端的对rem可能不是很熟,但是,如果你想倾向于网页开发App这一块,那么rem就是很重要的一块,对于px我相信没有人不认识,我们用px给文字设置大小的时候,不管你页面怎么放大缩小,字体大小都不会改变,而用rem设置大小,字体大小就会随之缩放而改变,想要真正了解rem原理的百度更详细.

第三句:

width :90%

设置页面各个标签的宽度大家都会,但是一般的用px绝对定位,假如用%,那么你的标签就不会超过你页面的宽度.简单的方法.以上方法随具体情况而变,也能结合使用,对于以上纯属作者个人意见,说的比较肤浅,请有不同看法的大神指教.

0 0