移动端适配-----rem方案

  • 时间:
  • 来源:互联网
  • 文章标签:

移动端适配问题

在设计移动端页面时,总会出现页面中某些模块不匹配的问题。这就需要我们在设计时,就充分考虑好布局以及最后缩放效果的呈现。推荐使用类似于rem这样的相对单位来进行布局。

做移动端适配,配合 rem 是其中一种方式

  • 首先找到最大尺寸,一般为720px
  • 当大于 720px 宽度时,html的font-size设置为 100px,几乎能兼容所有的大显示器
  • 要考虑的一个问题是,屏幕缩小时,字体尺寸如何调整?
    让 html 的font-size是一个动态的值;并且与视图窗口大小有关。 这样就是实现了 所有元素响应式。

一套代码、一个布局适应所有移动端

1 设计时,以【最大】像素也就是720px为标准 ,那么所有的移动端屏幕都谁适配。
2 整体布局默认不设置宽度;默认100%
3 父元素一般不设置高度 ,由子元素撑起来
4 图片设置 100%
5 布局用 flex 布局 不用 width=100%或者 float布局
6 文件大小 rem

本文链接http://www.taodudu.cc/news/show-82913.html