一、流式布局

  不再使用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. Redis入门(一)系统安装

    硬件环境:Thinkpad T450,Intel i5-5200U CPU @ 2.20GHz × 4 ,8GB RAM 软件环境: ubuntu 14.04.4 (trusty) 一.软件安装 #w ...

  2. Oracle数据库的后备和恢复————关于检查点的一些知识

    当我们使用一个数据库时,总希望数据库的内容是可靠的.正确的,但由于计算机系统的故障(硬件故障.软件故障.网络故障.进程故障和系统故障)影响数据库系统的操作,影响数据库中数据的正确性,甚至破坏数据库,使 ...

  3. Gridview导出EXCEL(多页) z

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. 解决:jquery ajax非首次请求Server端获取cookie值中文乱码问题

    HttpCookie cookie = new HttpCookie("RealName", HttpUtility.UrlEncode("你想要设置的值")) ...

  5. Metasploit更新

    Metasploit更新,官方放弃SVN,开始使用GIT 有一段时间没有写文章了,今天翻译一篇文章吧.以后Metasploit更新,请不要再使用下面的方法了 1 svn co https://www. ...

  6. c# webform网站图片另存代码

    好辛苦生成了二维码,然后要实现点击“保存图片”,弹出选择路径进行保存的效果. look: string qrcodeurl = ""; string username = &quo ...

  7. ZC706以太网扩展板接口

    端口 BANK-VADJ PIN NAME PIN_NAME RGMII0 rgmii_0_txc 10 AB14 LA15_N PHY_0_GTXCLK rgmii_0_rxc 10 AE13 LA ...

  8. java面试笔试

    一.String,StringBuffer, StringBuilder 的区别是什么?String为什么是不可变的? String在Java中是final的类,所以不可变:StringBuffer是 ...

  9. Python文档

    详细的为代码编写文档,这其实是写好代码的重要部分. 常见编写代码的陷阱: 1.别忘了冒号.一定要记住在复合语句首行末未输入":" 2.从第一行开始.要确定顶层(无嵌套)程序代码从第 ...

  10. androidstudio 查看源码

    handler.postDelayed(myrunable,10000); ctrl+鼠标左键,点击postDelayed显示(不可以查看源码) ctrl+鼠标左键,点击postDelayed显示(可 ...