一、流式布局

  不再使用px作为盒模型布局,而是采用百分比布局宽高,定位等。

  公式:目标元素宽度/上下文元素宽度=百分比宽度

     目标定位/上下文元素宽度或高度=定位距离(保留5位小数点)

  用em/rem来替换px

    1、em的值并不是固定的;

    2、em会继承父级元素的字体大小。

    3、rem为css新增属性,全称root em(root指html元素)

  弹性图片大小

    图片设置width:100%,或者background-size:100% 100%。

    图片设置阈值:max-width

二、响应式布局

  根据不同屏幕分辨率使用不同的样式和布局结构

  媒体查询

    @media 设备名 only (选取条件) not (选取条件)and (设备选取条件),设备二{sRules}

    <link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="link.css">

CSS3--响应式布局的更多相关文章

  1. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  2. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  3. css3响应式布局

    响应式布局 分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏) <style> .wrap {width: 900px; border: 1 ...

  4. CSS3 响应式布局: @media (min/max-width:***) @font-face

    响应式布局 responsive design @media 属性 bootstrap  css 分析: @media (min-width:768px){ body{***} } use @medi ...

  5. css3 响应式布局 Media Query

    1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...

  6. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  7. css3响应式布局教程—css3响应式

    响应式布局 一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验. 媒体类型 在何种设备或者软件上将页面打开 123456789 all:所有媒体braille:盲文触觉设备embossed:盲 ...

  8. css3响应式布局设计——回顾

    响应式设计是在不同设备下分辨率不同显示的样式就不同. media 属性用于为不同的媒体类型规定不同的样式.根绝浏览器的宽度和高度重新渲染页面. 语法: @media mediatype and | n ...

  9. CSS3响应式布局之弹性盒子

    CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...

  10. html5 响应式布局(媒体查询)

    响应式布局        响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.        响应式布局可以为不同终端的用户 ...

随机推荐

  1. Kafka/Metaq设计思想学习笔记 转

    转载自: http://my.oschina.net/geecoodeer/blog/194829 本文没有特意区分它们之间的区别,仅仅是列出其中笔者认为好的设计思想,供后续设计参考. 目前笔者并没有 ...

  2. Durid(一): 原理架构

    Durid是在2013年底开源出来的,当前最新版本0.9.2, 主要解决的是对实时数据以及较近时间的历史数据的多维查询提供高并发(多用户),低延时,高可靠性的问题.对比Druid与其他解决方案,Kyl ...

  3. linux keepalived+LVS 实现mysql 从库负载均衡

    前情提要: 参考链接: http://www.osyunwei.com/archives/7464.html ps:以上为本次操作的主要参考资料,非常感谢此文作者的贡献,我的随笔的主要目的是 说明在使 ...

  4. HttpSession的线程安全问题及注意事项

    摘自http://blog.csdn.net/java2000_net/article/details/2922357 HttpSession session =  request.getSessio ...

  5. document.write 动态加载 script 脚本时,特殊异常

    项目中有个JS,需要动态引入. 写法如下: <script> document.write('<script src="http://www.z4.com/js/xxxx. ...

  6. 关于android存储

    今天在测试android拍照功能时遇到一个困惑:照片拍成功了,程序能都能读取到,但是在手机储存中怎么也找不到拍的照片.先将学习过程中经过的曲折过程记录如下: 一:拍照并保持 通过调用android 的 ...

  7. ElasticSearch安装及部署

    安装及部署 一.环境配置 操作系统:Cent OS 7ElasticSearch版本:1.3.2JDK版本:1.7.0_51SSH Secure Shell版本:XShell 5elasticsear ...

  8. b/s开发者的困境

    作为一个由内而外都贴着web开发者标签的开发人员,注定会被大多数c/s开发者和通讯接口开发者所鄙视. 在他们看来,从事web开发,肯定很少用到算法,设计模式,多线程等等.我只能说,就我个人的经历来说, ...

  9. Android九宫图(draw9patch)

    左边和上边的线决定重复的区域: 右边和下边的线决定显示内容的区域:

  10. springmvc视图解析流程

    无论目标方法返回String.VIew或者是ModelAndView,springmvc都会转化成ModelAndView 然后通过视图解析器(如InternalResouceViewResolver ...