实用的移动端布局技巧

原创 前端三少 随笔 html/css 1093阅读 2017-12-07 16:59:49 举报
1.添加meta,使得网页在手机端能正常浏览

html 代码

2.考虑是使用px,还是使用rem

对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可;
如果需要高精度还原,适配各种手机,最好还是使用rem吧伙计们

1)使用px布局,宽度可使用百分比伸缩,高度使用固定像素
html 代码

2)使用rem的话,需要有一个辅助才能打出高额的伤害;从常用的两个辅助中选择一个;
辅助一,使用@media,根据屏幕大小自动调整
可以看看这篇文章详细介绍《CSS3的REM设置字体大小》

辅助二,使用js动态计算,这个简直好用的不得了,简直完美还原设计稿
html 代码

我自己常用的是adaptive.js

3.页面样式重置,这个在pc端还是移动端都会用到的

css 代码

4.使用一屏布局

这个是我在查看一些UI框架发现的东西,整个页面分三块不超过一屏,header、contaner、footer。
内容都放在container中,超过就overflow-y:scroll;
这个其实挺好用的,使得页面结构清晰,布局容易
html 代码

5.左边定宽,右边自适应的布局,我们会经常用到

html 代码

6.模块化、组件化开发,防止css命名重复,提高开发效率

这个对我这个英语词汇量不大的来说,简直是福音啊,
以前写css老是怕重名,写的各种奇怪命名,效率还低,
自从有了这个妈妈再也不用担心《如何写出优雅的css代码》

7.一像素的问题

在高分屏上写一个像素边框,那显示的活脱脱的就是两个像素,
设计师不满意,老板不满意;
我们可以用伪元素和css3来解决
css 代码

评论 ( 2 )
最新评论
1549607208 2017-12-20 09:38:01 2F

光标闪闪抒想法,键盘声声送评论。这,就是对作者最大的鼓励!

web2014 2017-12-20 08:41:05 1F

不错,我上次在京东看到一篇移动适配的也挺好 https://aotu.io/notes/2017/04/28/2017-4-28-CSS-viewport-units/