第一章 响应式设计之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技巧并举例说明.这些技巧都是使用简单 ...
随机推荐
- 通过css代码使边框变圆角(ie9以下浏览器不支持)
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-11) CSS代码: <style> #myDiv { border-radius: 4px; /*这句就是 ...
- pat 1055 区间前k个
http://pat.zju.edu.cn/contests/pat-a-practise/1055 第二组数据比较大,如果单纯排序直接检索会超时,因为每次都是对所有数据进行遍历. N/200=500 ...
- phantomjs
PhantomJS是以WebKit为核心并提供JavaScript编程接口(API)的无界面浏览器. 它提供对web标准的 快速 并且 原生 的支持: DOM操作.CSS选择符.JSON.Canvas ...
- IE调试方法(一)<转>
前面两篇关于IE11开发人员工具的文章,我们分别介绍了两个新的功能:UI响应工具和内存分析工具,今天为大家介绍一个老功能:网络工具,虽然是在IE9开始已经加入了这个工具,但是在IE11中还有有很多改进 ...
- Winform学习手册(目录)
一.基础: WINFORM学习笔记——创建Winform项目 WINFORM学习手册——TextBox.Lable.Button WINFORM学习笔记——窗体生命周期 WINFORM学习手册——对话 ...
- 将 Android 应用移植到 BlackBerry PlayBook 上
美国西部时间18号早上,也就是我们的19号凌晨,BlackBerry DevCon活动隆重举行,PlayBook 2.0开发测试版随之发布.PlayBook 2.0的一个重要功能就是支持Android ...
- TP常用函数
英文字符可用形如 {$vo.title|substr=0,5} 如果是中文字符thinkphp提供了msubstr如下 function msubstr($str, $start=0, $length ...
- [Angular 2] Select From Multiple Nested Angular 2 Elements
You have complete control over the elements you nest inside of your component instance by using sele ...
- 网络编程之PC版与Android手机版带断点续传的多线程下载
一.多线程下载 多线程下载就是抢占服务器资源 原理:服务器CPU 分配给每条线程的时间片相同,服务器带宽平均分配给每条线程,所以客户端开启的线程越多,就能抢占到更多的服 ...
- android Activity的杂乱总结
android中Activity可以说是四大组件中用的最为广泛,也是最为基本的一个组件.几乎和用户的所有交互都需要通过Activity来实现. 最近在学习过程中,有一些关于Activity的内容,让我 ...