我觉得写的很好的文章,但是我又没有时间去整理的。

https://blog.csdn.net/u010130282/article/details/52627661

百分比 是在宽度自适应的时候要用 通常在响应式和只需要宽度自适应的移动PC端页面使用
flex通常用在移动端需要整体宽度自适应的时候使用(相当于在移动端代替百分比 而且写法更方便不用考虑浮动位置问题 但是PC兼容性不好)
rem是用在移动端宽高都要自适应的时候要使用

但不是代表就只能用一种布局可以结合在一起使用 例如flex不能实现高度自适应 如果要实现要配合rem去实现 通常3种布局结合在一起效果会更好

都哪些情况可以用rem布局?
大部分情况下都可以用rem布局这个方法,当然具体还要看情况而定。拿我们公司项目举例,只有底部的导航不用rem,而是用的flex布局。因为导航点击最多,所以给它一个固定的大小(其实就是高度固定,宽度自适应的方案)。大家可以看看淘宝的这个手机页面 淘宝手机站,基本就是这种感觉,底部导航和顶部搜索框用的高固定,宽自适应的方案,其余的部分基本都是随着浏览器宽度变化在等比例缩放。
 
 
下面的代码非常好的解决页面自适应的问题
 

手机端页面自适应解决方案—rem布局 https://www.jianshu.com/p/b00cd3506782

手机端页面自适应解决方案—rem布局进阶版(附源码示例)

CSS之flex兼容的更多相关文章

  1. flex(兼容写法)

    CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水 ...

  2. 在线生成CSS样式和兼容的字体格式

    http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.

  3. css 清除浮动 兼容IE+, FF

    上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...

  4. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  5. css gray,grayscale,css变灰兼容大部分浏览器

    css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...

  6. css线性渐变兼容

    css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...

  7. css居中flex

    css利用flex实现居中(子元素可以不必管宽高):

  8. CSS模糊效果及其兼容方法

    今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...

  9. webstorm 添加css前缀(兼容)自动添加

    Webstorm自动添加css前缀( 兼容) 百度了很多在webstorm中添加css前缀(兼容)自动添加,autoprefixer插件是首选,对于基本的css,还有less都支持,所以就选择了aut ...

随机推荐

  1. FEC之我见二

    前面简单说了一下FEC,以及它的配合使用的方法.下面我想详细说一下FEC算法: 曾经有位大神在帖子里这么写着:采用改进型的vandermonde矩阵RS算法.其优点算法运算复杂度更低且解决了利用矩阵构 ...

  2. bzoj 3796: Mushroom追妹纸 AC自动机+后缀自动机+dp

    题目大意: 给定三个字符串s1,s2,s3,求一个字符串w满足: w是s1的子串 w是s2的子串 s3不是w的子串 w的长度应尽可能大 题解: 首先我们可以用AC自动机找出s3在s1,s2中出现的位置 ...

  3. bzoj 2300: [HAOI2011]防线修建 凸包

    题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=2300 题解 这道题让我们维护一个支持动态删除点的上凸壳 并且告诉了我们三个一定不会被删除 ...

  4. Linux 下使用 ssh 登录局域网其他电脑的方法

    Linux 下使用 ssh 登录局域网其他电脑的方法 首先查看电脑是否安装 ssh 客户端,如果没有执行下面命令安装客户端. sudo apt-get install openssh-client s ...

  5. UML Design Via Visual Studio-Class Diagram

    用过几个建模设计工具,小的有staruml,大的有rational rose,EA.最后发现还是Visual Studio建模比较舒服(个人观点,不要争论). 打算对自己经常用的几个建模图做一个介绍, ...

  6. bzoj 2406 矩阵 —— 有源汇上下界可行流

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2406 这题,首先把题目那个式子的绝对值拆成两个限制,就成了网络流的上下界: 有上下界可行流原 ...

  7. java笔试(2)

  8. C#设计模式(11)——外观模式

    一.概念 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用.使用外观模式时,我们创建了一个统一的类,用来包装子系统中一个或多个复杂的类,客户端可以直 ...

  9. 将gridview 的数据导出EXCEL

    gridview数据 单击“导出EXCEL”按钮后        1.在上面的代码中,先将gridview绑定到指定的数据源中,然后在button按钮(用来做导出到EXCEL的)的事件中,写入相关的代 ...

  10. SpringSecurity01 SpringSecurity环境搭建

    版本说明: JDK -> java version "1.8.0_101" MAVEN -> Apache Maven 3.5.0 IDEA -> 2017.2. ...