前端开发 ·

移动响应式布局(一)

一、移动端基础

0x1 Viewport

1、介绍
移动设备上的viewport是指设备的屏幕上能用来显示网
页的区域,一般来讲,移动设备上的viewport都要大于浏览
器的可视区域。

2、用法

0x2 CSS度量单位

|单位|说明|兼容性|
|---|---|---|
|em|相对长度单位,相对于当前对象内文本的字体尺寸, 根据父元素的大小变化而变化|良好|
|rem|相对长度单位,相对于跟元素( 即 html 元素)font-size 的倍数, 不会被它的父元素影响|IE9+、火狐 3.6+、 safari5.0+|
|vw|相对于视口的宽度, 视口被均分为 100 单位的vw|高版本浏览器均支持|
|vh|相对于视口的宽度, 视口被均分为 100 单位的vh|高版本浏览器均支持|
详情移步这里点击查看

二、响应式布局

0x1 响应式布局(@media)

优点:

  • 针对不同的屏幕尺寸设置不同的样式
  • 响应式布局是解决移动端设备屏幕尺寸不同的问题
  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题

缺点:
- 兼容各种设备工作量大,效率低下
- 代码累赘,会出现隐藏无用的元素,加载时间加长
- 是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果

0x2 媒体查询

写法:

理解:媒体查询是响应式布局的方法之一,扩展了 Media 属性。
作用:使网页适配于各种设备(为不同设备提供不同样式)。
核心:当屏幕改变到一定的大小,页面中的模块样式设置发生改变。

media feature:
- max-width:定义输出设备中的页面最大可见区域宽度。
- min-width:定义输出设备中的页面最小可见区域宽度。

0x3 实战@media案例

效果图:

Demo

下面附上比较全面的reset.css

参与评论