书里谈到尽量不要使用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的更多相关文章

  1. 前端响应式设计中@media等的相关运用

    现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...

  2. Ext JS 6学习文档-第8章-主题和响应式设计

    Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 ...

  3. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  4. 响应式设计的思考:媒体查询(media query)

    Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...

  5. 使用media query 来实现响应式设计

    你的网页在手机上显示效果可以在电脑上一样好看.完成这个任务的奥秘被称为响应式设计,媒体查询(media query)是实现网页响应的关键. 在电脑上一个例子: <div class=" ...

  6. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  7. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  8. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  9. 响应式设计的5个CSS实用技巧

    正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了.现在我分享在编码时常用的五个CSS技巧并举例说明.这些技巧都是使用简单 ...

随机推荐

  1. wikioi 1010 过河卒

    题目描述 Description 如图,A 点有一个过河卒,需要走到目标 B 点.卒行走规则:可以向下.或者向右.同时在棋盘上的任一点有一个对方的马(如上图的C点),该马所在的点和所有跳跃一步可达的点 ...

  2. 汽车常用的ECU芯片

    Power Train ECU的CPU用的比较多的基本来自于Infineon,ST,Freescale BOSCH的16位ECU M(E)7系列主要使用C167内核的CPU,早期的M(E)7系列使用西 ...

  3. IE自动化 二(判断IP所在地)

    该脚本用来访问一个url,并取出相应结果(该脚本用来通过淘宝API实现判断一个IP所在地) #定义要访问的URL $url="http://ip.taobao.com/service/get ...

  4. IIS 7.0 and Web Farms

    1. IIS 6 IIS 6.0 was capable of scaling out to virtually any number of web servers and had tools lik ...

  5. Looksery Cup 2015 B. Looksery Party 暴力

    B. Looksery Party Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/549/pro ...

  6. java学习笔记(5)——内部类

    一.内部类 1,静态内部类 使用static修饰,声明在类体中 静态内部类中可以访问外部类的静态成员 2,成员内部类 声明在类体中,不使用static,具有类的成员特征,也就是,必须有类的实例才能 创 ...

  7. Visual C++内存泄露检测—VLD工具使用说明[转]

    Visual C++内存泄露检测—VLD工具使用说明 一.        VLD工具概述 Visual Leak Detector(VLD)是一款用于Visual C++的免费的内存泄露检测工具.他的 ...

  8. C#开源项目

    原文:  http://alance.iteye.com/blog/693987 一.AOP框架        Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了 ...

  9. SIFT算法的应用--目标识别之Bag-of-words模型

    原文:http://blog.csdn.net/v_JULY_v/article/details/6555899 SIFT算法的应用 -目标识别之用Bag-of-words模型表示一幅图像 作者:wa ...

  10. Python Counter() 的实现

    Table of Contents 1. collections.Counter 源码实现 1.1. __init__ 1.2. update 1.3. most_common 1.3.1. item ...