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 响应式布局(媒体查询)
响应式布局 响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户 ...
随机推荐
- .NET Core On Mac 第一步,配置环境
话说.NET Core出来这么久了,也没搞搞,实在是羞愧难当啊.既然选择了开始那就不能半途而废啊..NET 跨平台了,那我就用Mac试试吧. 安装步骤一:安装Homebrew 其中会遇到权限不够的问题 ...
- 使用.net的Cache框架快速实现Cache操作
本文转载自:http://www.cnblogs.com/TianFang/p/3430169.html .NET 4.0中新增了一个System.Runtime.Caching的名字空间,它提供了一 ...
- php返回json,xml,JSONP等格式的数据
php返回json,xml,JSONP等格式的数据 返回json数据: header('Content-Type:application/json; charset=utf-8'); $arr = a ...
- html5 xdm 页面之间的通信
<!-- 这个是父页面xdm.html --><!DOCTYPE html> <html> <head> <meta charset=" ...
- 2 、Linux基本命令-ls-pwd-cd-date-hwclock
Linux基本命令: 1.ls-查看目录下的文档 语法: ls 目录 注: .当前目录 ..上级目录 如:ls /etc/ 相关参数: -l 显示详细信息 ls /etc/ -l -a 显示隐藏的 ...
- Visual Studio 2015里面汇编工具Asm Dude的配置!
最近开始学习汇编,也开始使用Visual Studio 2015写汇编程序,比较了半天,最后觉得Asm Dude应该是目前Visual Studio 2015非常好的汇编开发插件了,但是如果默认安装上 ...
- 织梦如何重新安装 织梦dir 二次安装
一般安装过一次织梦就不需要重新再去下载安装第二次了,我们可以在原有的基础上重新安装一次.这个是织梦cms后台自带的功能,还比较方便,下面小编就分享下如何重装织梦. 如果在本地重装要打开集成环境,在浏览 ...
- Unity破解for mac
Mac 版本的破解: 1,确定Unity的版本,然后找到对应的crack包,下载.例如 Unity 4.2.0f4 crack包,我已经放到我的资源里了. 2,解压.这里我解压到了桌面上(也就是 /U ...
- ubuntu NTP server 搭建
ubuntu server ntp时间同步服务器安装及使用一.服务端1 apt-get install ntp 2 安装后默认启动服务,如果没有启动,启动之. /etc/init.d/ntp star ...
- IPTV视频基本概念
480x320, 640x480 标清 1024x720p 高清 1920x1080i (隔行扫描) 也属于高清 1920x1080p 全高清 3840x2160,7680x4320 超(高)清 ...