对移动页面进行适配

  • A+
所属分类:前端工程

在书写移动页面的时候,使用px单位会让页面的宽可高固定,不能满足所有移动设备,导致页面的混乱,对用户的体验不够好。为了解决这个问题,我们需要对移动页面进行适配。

适配的要求

  1. 在不同分辨率的手机上,页面看起来是自适应的。整体效果看起来比较和谐。不会说大屏幕上看起来特别小。小屏幕上看起来特别大
  2. 主要是关注字体,宽高,间距,图片大小等。
  3. 所提供的设计图一般是手机分辨率的两倍,才能方便做适配。
  4. 使用rem做单位,而不是传统的px

适配的方法,3个步骤

步骤1:

设置viewport,也就是平时写移动端页面都要加上的:

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

步骤2:

首先我们在我们的页面引入下面的flexible.js,

这段适配的js代码是拿淘宝的来用的。

适配的js代码的github地址如下:https://github.com/amfe/lib-flexible/blob/master/src/flexible.js。

步骤3:

页面上我们的css代码可以这样写,比如设计图给我们的尺寸是750*1000的。某个容器在设计图的宽度是150px*225px,那我们在css里面

宽度:150px/750px/10=150px/75px=2rem;

高度为:225px/75px=3rem;

一句话:布局的时候,各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10;

div{
    width: 2rem;
    height: 3rem;
}

通过上面的3个步骤,我们就可以将我们的移动端页面做成适配的了。

  • 公众号
  • 扫一扫
  • weinxin
  • 打赏
  • 扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: