页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。
常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页面。
这几个布局都是自适应的，自动适配桌面设备和移动设备。代码实现很简单，核心代码只有一行，有很大的学习价值，内容也很实用。
第三代移动端布局方案
第三代移动端布局方案
大家有没有发现淘宝的H5移动端没有使用任何rem和vw单位，而是和web端项目一样，使用的是px单位。虽然是px但它也很完美的将整个页面渲染了出来。那淘宝的FE是怎么实现的呢？
最近在研究关于布局的设计方案，通过学习理解阿里的fusion.design的设计思想并结合手机淘宝H5版的px布局问题。逐渐有了一些想法，这里进行综合整理，也算是抛砖引玉吧。…
移动端rem 适配方案
知识点：
rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素(rem)一个是依赖父元素计算(em)。
个人理解rem布局可分为俩种情况无设计稿和有设计稿：
无设计稿
1、首先需要在<head>标签中加入
<meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no">
对于viewport的详细解释可以参考这篇文章：https://www.cnblogs.com/2050/p/3877280.html
2、在<script>标签中加入
window.onresize = function只要一行代码，实现十种 CSS 经典布局
原响应式网页分辨率设定
响应式网页分辨率分为以下5个区间。
- <=480px
- 481 - 767px
- 768-991px
- 992 - 1199px
- >=1200px
…
我应该使用哪些媒体查询断点？
在弄清楚要使用哪些媒体查询断点之前，我们需要查看我们要设计的设备。
我已经研究了一些常见的设备分辨率，并且大多数可以分为几类。我列出了这些类别，以及它们可以满足的分辨率：
- 移动肖像（320像素至414像素）—适用于4“至6.9”屏幕的设备。
- 移动横向（568像素至812像素）—相同，但横向。
- 平板电脑肖像（768像素至834像素）—适用于设备7“至10”
- 平板电脑横向（1024像素至1112像素）—同上，肖像上也有12英寸平板电脑
- 笔记本电脑和台式机显示器（1200px +）-变化很大，但通常为1200px以上
下一步：那么我们如何理解这些设备？
原响应式图像正确设置方法
响应式图像正确设置方法，代码如下：
PC,平板，手机显示良好：
我们用<picture>标签来实现同时适配不同像素密度、不同大小的屏幕。srcset属性用来指定多张图像，适应不同像素密度的屏幕。
通过 媒体查询，来为不同宽度的屏幕设置不同的图片。
其中，1x 2x 3x 代表设备像素比。
通常 pc的设备像素比为1，iphone7为2，iphone7 plubs为3，一些手机为4，还有一些为1.5，3.65等非整数值。
在下面，所有的设备像素比都要用同一张图片，这样才能显示正常。…
CSS Grid 网格布局教程
一、概述
网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
上图这样的布局，就是 Grid 布局的拿手好戏。
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。…
CSS Grid 布局完全指南(图解 Grid 详细教程)
本文最后更新于 2018年11月20日。推荐姊妹篇：Flexbox 布局完全指南(图解 Flexbox 布局详细教程)
CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。…
一行css代码搞定响应式布局
在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必为每个屏幕创建媒体查询。ok，让我们发车吧。
近期评论