CSS之flex兼容
我觉得写的很好的文章,但是我又没有时间去整理的。
https://blog.csdn.net/u010130282/article/details/52627661
百分比 是在宽度自适应的时候要用 通常在响应式和只需要宽度自适应的移动PC端页面使用
flex通常用在移动端需要整体宽度自适应的时候使用(相当于在移动端代替百分比 而且写法更方便不用考虑浮动位置问题 但是PC兼容性不好)
rem是用在移动端宽高都要自适应的时候要使用
但不是代表就只能用一种布局可以结合在一起使用 例如flex不能实现高度自适应 如果要实现要配合rem去实现 通常3种布局结合在一起效果会更好
大部分情况下都可以用rem布局这个方法,当然具体还要看情况而定。拿我们公司项目举例,只有底部的导航不用rem,而是用的flex布局。因为导航点击最多,所以给它一个固定的大小(其实就是高度固定,宽度自适应的方案)。大家可以看看淘宝的这个手机页面 淘宝手机站,基本就是这种感觉,底部导航和顶部搜索框用的高固定,宽自适应的方案,其余的部分基本都是随着浏览器宽度变化在等比例缩放。
手机端页面自适应解决方案—rem布局 https://www.jianshu.com/p/b00cd3506782
手机端页面自适应解决方案—rem布局进阶版(附源码示例)
CSS之flex兼容的更多相关文章
- flex(兼容写法)
CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水 ...
- 在线生成CSS样式和兼容的字体格式
http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.
- css 清除浮动 兼容IE+, FF
上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- css gray,grayscale,css变灰兼容大部分浏览器
css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...
- css线性渐变兼容
css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...
- css居中flex
css利用flex实现居中(子元素可以不必管宽高):
- CSS模糊效果及其兼容方法
今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...
- webstorm 添加css前缀(兼容)自动添加
Webstorm自动添加css前缀( 兼容) 百度了很多在webstorm中添加css前缀(兼容)自动添加,autoprefixer插件是首选,对于基本的css,还有less都支持,所以就选择了aut ...
随机推荐
- freeMarker(十)——模板语言之内建函数
学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.字符串内建函数 这些内建函数作用于表达式左侧的字符串值. 如果左侧 ...
- linux 在后台运行数据库导入导出命令
nohup imp dbusername/password@orcl file=/home/20170928.dmp ignore=y log=/home/oracle/20170928.log fu ...
- java多线程编程核心技术——第三章总结
第一节等待/通知机制 1.1不使用等待/通知机制实现线程间的通讯 1.2什么是等待/通知机制 1.3等待/通知机制的实现 1.4方法wait()锁释放与notify()锁不释放 1.5当interru ...
- log4net 使用
1. 代码中使用配置文件: log4net.Config.DOMConfigurator.Configure(new FileInfo("log4netConfig.xml")); ...
- Centos6.5命令行快捷键
ctrl+a打开一个新的终端 ctrl+l 清除屏幕内容 ctrl+a 切换到命令行开始ctrl+e 切换到命令行末尾ctrl+u 剪切光标之前的内容ctrl+k 剪切光标之后的内容 Ctrl+-&g ...
- Windows Touch 便笺簿的
Windows Touch 便笺簿的 C# 示例 (MTScratchpadWMTouchCS) 本节介绍 Windows Touch 便笺簿的 C# 示例. Windows Touch 便笺簿的 ...
- numpy.ones_like(a, dtype=None, order='K', subok=True)返回和原矩阵一样形状的1矩阵
Return an array of ones with the same shape and type as a given array. Parameters: a : array_like Th ...
- Tomcat 服务器详解
工具/原料 1.JDK:版本为jdk-7-windows-i586.exe 下载地址 http://www.oracle.com/technetwork/java/javase/download ...
- BO 与 VO 的属性拷贝 copyProperties(bo,vo)
NewClass extends OldClass : newClass继承自oldClass,属性大多数相同,但是也有新的扩展. beanUtils.copyProperties(oldClas ...
- play的job执行方式
除了使用Quartz CRON trigger, 还可以写一个action来专门触发job,这样子就可以随时启动job的开始,而且还能并行其他的任务.较方便.