CSS3--响应式布局
一、流式布局
不再使用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--响应式布局的更多相关文章
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- CSS3–2.css3 响应式布局
1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...
- css3响应式布局
响应式布局 分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏) <style> .wrap {width: 900px; border: 1 ...
- CSS3 响应式布局: @media (min/max-width:***) @font-face
响应式布局 responsive design @media 属性 bootstrap css 分析: @media (min-width:768px){ body{***} } use @medi ...
- css3 响应式布局 Media Query
1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...
- CSS3–2.css3 响应式布局
1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...
- css3响应式布局教程—css3响应式
响应式布局 一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验. 媒体类型 在何种设备或者软件上将页面打开 123456789 all:所有媒体braille:盲文触觉设备embossed:盲 ...
- css3响应式布局设计——回顾
响应式设计是在不同设备下分辨率不同显示的样式就不同. media 属性用于为不同的媒体类型规定不同的样式.根绝浏览器的宽度和高度重新渲染页面. 语法: @media mediatype and | n ...
- CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
- html5 响应式布局(媒体查询)
响应式布局 响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户 ...
随机推荐
- pt-fifo-split使用
percona-toolkit系列-pt-find http://blog.itpub.net/23249684/viewspace-1354308/ 在<mysql插入/更新数据>这篇文 ...
- Autocad 常用命令
一律使用的简写 1:将多条线段合并成一条多线段[pe] 2:如果发现合并的多线段将自己不想合并的区域合并进去了,别担心,炸开就行了 [x] 3:如果画的线段太长工作区不适应,使用缩放命令.[scale ...
- SQL SERVER:使用工具观察与分析数据库中锁信息
SQL SERVER 2005可以通过Microsoft SQL Server Management Studio的“管理–>活动监视器”–>“右键”–>“进程信息”,这里呈现连接. ...
- android学习笔记54——ContentProvider
ContentProvider ContentProvider用于实现数据共享. ContentProvider是不同应用程序之间进行数据交换的标准API,其以某种Uri的形式对外提供数据,允许其他应 ...
- urlrewriter的使用
开源类库地址 https://github.com/sethyates/urlrewriter/find/master <?xml version="1.0"?> &l ...
- JSP+servlet简单登录实例
一个简单的jsp+servlet实例,实现简单的登录 转载▼ http://blog.sina.com.cn/s/blog_5c5bc9070100z7wb.html 开发环境myeclips ...
- 解决bash: mysql: command not found 的方法
root@DB-02 ~]# mysql -u root-bash: mysql: command not found 原因:这是由于系统默认会查找/usr/bin下的命令,如果这个命令不在这个目录下 ...
- eclipse几个注意的地方
1.eclipse+tomcat调试java web,eclipse中更新了代码,而tomcat中代码不同步更新 1)双击eclipse tomcat server,勾选"Modules a ...
- 不同hadoop集群之间迁移hive数据
#!/bin/bash #set -x DB=$1 #获取hive表定义 ret=$(hive -e 'use ${DB};show tables;'|grep -v _es|grep -v _hb| ...
- 剑指Offer:面试题26——复制复杂的链表(java实现)
问题描述: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点). 思路1: 1.先复制链表节点,并用next链接起来. 2.然后对每一个结点去修改 ...