本篇文章主要讲述使用Flex布局、Grid布局以及媒体查询三种方式来实现响应式布局。

文章涉及代码在线coding地址

效果图:



文字描述:

屏幕大小不同,展示列数不同,1-5号按照屏幕大小可展示2到4列不等,6号始终独占一行

Flex布局

阮一峰Flex布局讲解

方案1(每一项元素不放大)

  1. 将可能会出现在一行的表单项放在一个父级容器内
  2. 父级容器设置flex-flow: row wrap;表示横向排列,空间不足时换行
  3. 设置容器内每一项元素的flex: 0 0 420px;(420px为每一项元素的基础宽度)
  1. flex: 0 0 420px;
  2. 等同于
  3. flex-grow: 0;
  4. flex-shrink: 0;
  5. flex-basis: 420px;

优点:

  1. 不用写媒体查询可实现屏幕变大列数自动变多
  2. 展示多行时,行列之间上下能够对齐

缺点:

当增量空间不足时,右侧余出大量空白,不满足UI适配规范

方案2(每一项元素放大)

  1. 将可能会出现在一行的表单项放在一个父级容器内
  2. 父级容器设置flex-flow: row wrap;表示横向排列,空间不足时换行
  3. 设置容器内每一项元素的flex: 1 0 420px;
  1. flex: 1 0 420px;
  2. 等同于
  3. flex-grow: 1;
  4. flex-shrink: 0;
  5. flex-basis: 420px;

优点:

  1. 不用写媒体查询可实现屏幕变大列数自动变多
  2. 增量空间不足,不足以容纳新列时,其他列自动拉宽

缺点:

  1. 展示不下另起一行的列与上一列对应列未对齐(尝试过不可通过占位等实现,字段个数不确定,不好占位)

Grid布局

阮一峰Grid布局讲解

  1. 设置父容器为grid布局
  2. 设置每一列的宽度为自动填充,最小宽度420,最大1fr
  1. display: grid;
  2. grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));

优点

可实现随屏幕大小变化,列数跟随变化,并可上下列对齐。

缺点

有兼容性问题





如果不考虑兼容性问题,可以考虑使用Grid布局,完美实现

media媒体查询

  1. 将可能会出现在一行的表单项放在一个父级容器内
  2. 父级容器设置flex-flow: row wrap;表示横向排列,空间不足时换行
  3. 根据不同的屏幕宽度设置flex: 0 0 50%(两列)/33%(三列)/25%(四列)
  1. @media screen and (max-width: 1280px) {
  2. flex: 0 0 50%;
  3. }
  4. @media screen and (min-width: 1281px) and (max-width: 1440px) {
  5. flex: 0 0 33.33%;
  6. }
  7. @media screen and (min-width: 1441px) {
  8. flex: 0 0 25%;
  9. }

优点:

  1. 兼容性强
  2. 实现各屏幕大小下展示不同的列数

缺点:

  1. 需要写多个媒体查询

到这里,三种实现响应式布局的方式就记录完了!!每天都要进步一点点!

Flex、Grid、媒体查询实现响应式布局的更多相关文章

  1. CSS:使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  2. 关于css3媒体查询和响应式布局

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

  3. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  4. css媒体查询:响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

  5. CSS3---媒体查询与响应式布局

    1. 值 设备类型 All 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打印机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种 ...

  6. CSS3 媒体查询@media 查询(响应式布局)

    例:如果文档宽度小于 300 像素则修改背景颜色(background-color): @media screen and (max-width: 300px) { body { background ...

  7. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  8. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  9. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

随机推荐

  1. better-scroll实现滚动

    通过better-scroll这个插件实现微信好友滚动列表 安装better-scroll npm i better-scroll 初始化better-scroll   //better-scroll ...

  2. yield 的使用

    yield 在很多高级语言都有,比如:python.scala.JavaScript.Ruby等. 我们实际工作时,很少会用到yield,但是也架不住求职面试的时候,面试官可能会问呀. yield 在 ...

  3. Istio的流量管理(实操三)

    Istio的流量管理(实操三) 涵盖官方文档Traffic Management章节中的egress部分.其中有一小部分问题(已在下文标注)待官方解决. 目录 Istio的流量管理(实操三) 访问外部 ...

  4. ZEQP仓储管理系统( WMS)开源

    ZEQP仓储管理系统 代码框架是用的前后台分离的方式 后台使用的是Asp.Net Core平台,开发所有业务,向前台提供Rest API接口. 使用的认证方式是JWT 前端有两个项目,一个是Web端, ...

  5. JS - 对金额数字实现千分位格式化处理

    添加千分位处理: function fmoney(s, n) { n = n > 0 && n < = 20 ? n : 2; s = parseFloat((s + &q ...

  6. 无法创建新虚拟机: 无法打开配置文件“F:\BigData\vm12\centos01\centos01.vmx”: 拒绝访问。

    退出,右键vmware选择以管理员身份运行即可.

  7. 【Spring注解驱动开发】二狗子让我给他讲讲@EnableAspectJAutoProxy注解

    写在前面 最近,二狗子入职了新公司,新入职的那几天确实有点飘.不过慢慢的,他发现他身边的人各个身怀绝技啊,有Spring源码的贡献者,有Dubbo源码的贡献者,有MyBatis源码的贡献者,还有研究A ...

  8. 20190923-07Linux搜索查找类 000 015

    find 查找文件或者目录 find指令将从指定目录向下递归地遍历其各个子目录,将满足条件的文件显示在终端. 1.基本语法 find [搜索范围] [选项] 2.选项说明 表1-27 选项 功能 -n ...

  9. 用Python写一个向数据库填充数据的小工具

    一. 背景 公司又要做一个新项目,是一个合作型项目,我们公司出web展示服务,合作伙伴线下提供展示数据. 而且本次项目是数据统计展示为主要功能,并没有研发对应的数据接入接口,所有展示数据源均来自数据库 ...

  10. selenium中Xpath标签定位和cssSelectors定位(优先用cssSelectors)

    二者的区别:xpath 支持角标定位,cssselector不支持 1.XPath是XML的路径语言,通俗一点讲就是通过元素的路径来查找到这个标签元素. xpath支持属性定位,无论是默认属性还是自定 ...