第一章 响应式设计之Media Quer
书里谈到尽量不要使用Media Queriy。 但是过多使用media query,会导致CSS变得脆弱和页面难以维护。一些方法可以减少页面使用 media query.
响应式设计:
(1) 使用百分比替换固定的宽度。如果不行,也尽量使用vw, vh, vmin, vmax。
(2) 使用max-width,而不使用width。
(3) 对于一些元素,如img, object, video, iframe, 使用max-width: 100%。
(4) 如果背景图片要完全覆盖容器,可以使用background-size: cover。
(5) 当要在表格的行和列中对图片或其他元素进行布局时,可以使用Flexbox布局或者display: inline-block。
(6) 使用多列文本时,使用column-width替换column-count
总结: 尽量使用流布局和相对大小。
(对flexbox布局, 和css3属性还要多做了解额)
第一章 响应式设计之Media Quer的更多相关文章
- 前端响应式设计中@media等的相关运用
现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...
- Ext JS 6学习文档-第8章-主题和响应式设计
Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- 响应式设计的思考:媒体查询(media query)
Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...
- 使用media query 来实现响应式设计
你的网页在手机上显示效果可以在电脑上一样好看.完成这个任务的奥秘被称为响应式设计,媒体查询(media query)是实现网页响应的关键. 在电脑上一个例子: <div class=" ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- CSS 响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
- 响应式设计的5个CSS实用技巧
正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了.现在我分享在编码时常用的五个CSS技巧并举例说明.这些技巧都是使用简单 ...
随机推荐
- table布局 height=100%无效分析
(从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...
- Codeforces Educational Codeforces Round 3 D. Gadgets for dollars and pounds 二分,贪心
D. Gadgets for dollars and pounds 题目连接: http://www.codeforces.com/contest/609/problem/C Description ...
- cdoj 80 Cube 水题
Cube Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/80 Descrip ...
- c#winform使用WebBrowser 大全[超长文转载]
1.主要用途:使用户可以在窗体中导航网页. 2.注意:WebBrowser 控件会占用大量资源.使用完该控件后一定要调用 Dispose 方法,以便确保及时释放所有资源.必须在附加事件的同一线程上调用 ...
- HTML5 自动聚焦 属性
原文 : HTML5 autofocus Attribut 原文发布时间: 2012年08月27日 翻译时间: 2013年8月6日 HTML5 推出了一大堆精彩的东西给我们. 过去我们要用JavaSc ...
- HTML之一字符集
ASCII字符集 ISO字符集 GBK等等. 1>首先,说一说为什么要设置html文件的字符集 如果不指定的话,浏览器会使用本地操作系统的字符集,那么,如果你的应用需要支持多国语言的话,就会有问 ...
- Swift之UIBezierPath
使用UIBezierPath可以创建基于矢量的路径.使用此类可以定义简单的形状,如椭圆.矩形或者有多个直线和曲线段组成的形状等.主要用到的该类的属性包括 moveToPoint: //设置起始点 ad ...
- crm2011创建货币Money类型的字段
using System; using Microsoft.Xrm.Sdk; using Microsoft.Xrm.Sdk.Messages; using Microsoft ...
- 压缩工具和整盘备份工具dd
一.使用gzip压缩文件 gzip是GNU zip的缩写. [命令格式] gzip [option] filename [常用选项] c:压缩后将结果输出到标准输出,并保留原始文件. d:解压缩文件. ...
- Topology: The Architecture of Distributed Systems--reference
reference:http://blog.couchbase.com/topology-architecture-distributed-systems You can’t judge a book ...