第一章 响应式设计之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技巧并举例说明.这些技巧都是使用简单 ...
随机推荐
- Vagrant 快速入门
1. Vagrant功能: Vagrant uses Oracle’s VirtualBox to build configurable, lightweight, and portable virt ...
- Eclipse调试Java的10个技巧
原文地址: http://www.oschina.net/question/82993_69439 在看这篇文章前,我推荐你看一下Eclipse 快捷键手册,我的eclipse版本是4.2 Juno. ...
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
- Codeforces Round #335 (Div. 2) B. Testing Robots 水题
B. Testing Robots Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/contest/606 ...
- 搭建Spring + SpringMVC + Mybatis框架之一(创建项目)
创建项目 用maven管理项目很方便,不用手动下载jar包,直接在pom.xml配置文件中,maven可以帮助我们自动下载,非常方便 新建一个web project,添加maven支持就可以了,这样创 ...
- URL路由规则实例
1.设置支持路由和写路由规则
- progressBarButton
https://github.com/longtaoge/progressBarButton
- 【JavaScript】jQuery Ajax 实例 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
- android调用系统相机拍照并保存在本地
import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...
- Android开发数据存储之ContentProvider详解
转载:十二.ContentProvider和Uri详解 一.使用ContentProvider(内容提供者)共享数据 ContentProvider在android中的作用是对外共享数据,也就是说你可 ...