原标题:移动端web开发,怎么自适应屏幕的大小
作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事。
在移动端web开发,手机页面的自适应大小,该如何解决了?
1.Viewport
在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可是设置高度宽度,可是按比例放大缩小,而且能设置是否允许用户自行缩放。
在标签内增加一个的标签。
这样就构建了一个移动的web页面。
2.rem em vh vw %
布局用rem em vh vw 单位可以用来进行适配,
rem 以根元素的字体大小来进行适配。
em 以父元素的字体大小来进行适配。
vh 当前屏幕可见高度的%。
vw当前屏幕可见宽度的%。
这些在一些低版本的IE就不支持了。
3.屏幕的自适应方案
自适应的方案有很多,比如百分比布局,弹性布局等。
我在咔拉商城移动端,用的是响应式布局,看上面图片,在各个手机屏幕大小都能很好的适应。
在CSS文件里输入
用媒体查询来自适应屏幕的大小,之后可以用rem单位来进行适配。
还一些其他自适应的方案,像lib-flexible,lib-flexible引入文件后,会根据屏幕的大小,动态更改根元素html的font-size的大小。也是用rem自适应的。这个方案也很好用。返回搜狐,查看更多
责任编辑: