总结

移动端Web适配总结回顾

移动端Web适配总结提高

2018-06-16侠课岛    初级拔高       

前端/前端必修/移动端Web适配探索实践 10     0     2837

移动端Web适配总结提高

什么是适配?

让网页效果看起来和设计师的设计稿一样。也就是说同一套代码在不同分辨率的手机上运行时,页面元素间的间距,留白,以及图片大小等会随着变化,在比例上跟设计稿一致。

为什么要适配?

手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,针对移动端设备的页面,设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备

移动端适配概念和相关知识介绍

  1. viewport视口

  2. CSS像素

  3. 物理像素(physical pixel)

  4. 设备独立像素(Device Independent Pixels)

  5. 设备像素比dpr(device pixel ratio)

  6. rem(一个CSS单位)

  7. vw/vh:CSS单位

适配的方法

  1. 理解meta标签

  2. 弹性布局法

  3. px转换rem法

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

10

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?