由于手机屏幕尺寸不一样，分辨率不一样，或者需要考虑横竖屏的问题，或者考虑到移动端兼容性。这时候你也就不得不解决在不同手机上，不同情况下的展示效果，所以就需要一个开箱即用并且行之有效的移的移动端适配方案

就目前看来，web的屏幕适配是贯穿整个前端行业的，如常见的PC端，移动端，响应式，小程序等。 正是因为 PC端上的浏览器大小会经常被改变，而且改变的范围还很大，用户会全屏浏览器，用户也会缩小浏览器到一个很小的值，如600px左右。 所以pc端上如果使用流式布局(百分比布局)，会…

前言 好了，下面进入今日主题 怎么做到响应式布局呢？ 首先我们得先了解什么是响应式 比较懒，就直接 拿来把你 响应式布局的优点： 面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。 响应式布

写在前面 布局的历史发展 随着互联网和相关设备的发展，前端的布局大概经历了这几个阶段：table布局阶段、div+css布局阶段、静态布局阶段、流式布局阶段、自适应布局阶段、响应式布局阶段、弹性布局

前言 近期需要为公司组件文档提供响应式支持，让使用者在不同尺寸的屏幕下也可以有更好的浏览体验。由于文档网站页面内容与布局并不是很复杂，所以采用响应式布局来实现，而实现 响应式设计 方式有很多，这里笔者

在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必…

页面自适应布局以及分辨率适配方案 流式布局 保证布局内每一级必须设置相对于父级百分比宽度，但设计稿一般都是按照固定宽度设计，内部图片都是固定大小，拉伸或者缩放时都会导致变形，虽然都够实现布局宽度上的自

课程目标 一、移动端基础 1.1 浏览器现状 1.2 手机屏幕现状 1.3 常见移动端屏幕尺寸 1.4 移动端调试方法 1.5 总结 二、视口 视口（viewport）就是浏览器显示页面内容的屏幕区域

就是相对于浏览器 viewport 尺寸的单位，具体包括下面 4 个： vw – 视区宽度百分值 vh – 视区高度百分值 vmin – vw 或 vh，取小的那个 vmax – vw 或 vh，取大的那个