移动web之响应式布局
1.响应式布局的概念
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念。简而言之。就是一个站点可以兼容多个终端——而不是为每一个终端做一个特定的版本号。
这个概念是为解决移动互联网浏览而诞生的。
响应式布局能够为不同终端的用户提供更加舒适的界面和更好的用户体验。并且随着眼下大屏幕移动设备的普及。用大势所趋来形容也不为过。
2.Media Rule
1)定义和用途
Media Rule是用来定义不同的媒体类型/不同设备的样式规则。
在css2中它被称为Media types,在css3中被称为Media Querys.
用途:
·浏览器的高度和宽度
·设备的高度和宽度
·设备的方向(横向/纵向)
·dpi
·and more
2)css语法
在样式表中嵌入@media
@media not|only mediatype and (media feature) {
CSS-Code;
}
/* 当浏览器的可视区域小于980px */
@media [only] screen and (max-width: 980px) {
#wrap {width: 90%; margin:0 auto;}
#content {width: 60%;padding: 5%;}
#sidebar {width: 30%;}
#footer {padding: 8% 5%;margin-bottom: 10px;}
}
/* 当浏览器的可视区域小于650px */
@media screen and (max-width: 650px) {
#header {height: auto;}
#searchform {position: absolute;top: 5px;right: 0;}
#content {width: auto; float: none; margin: 20px 0;}
#sidebar {width: 100%; float: none; margin: 0;}
}
在link中使用@media
<link rel="stylesheet" media=" mediatype and|not|only ( media feature )" href=" mystylesheet.css ">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />
3)viewport
须要在页面的head中加上viewport,这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
<meta name="viewport" content="width=device-width; initial-scale=1.0;user-scalable=yes">
demo:
測试站点:http://responsivator.queenslandwebplan.com/
demo:http://2012.dconstruct.org/
移动web之响应式布局的更多相关文章
- web前端响应式布局,自适应全部分辨率
写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...
- WEB前端响应式布局之BootStarp使用
1.Bootstrap简介:1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的 ...
- 移动Web之响应式布局的探讨
响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...
- web前端----响应式布局
响应式开发 为什么要进行响应式开发? 随着移动设备的流行,网页设计必须要考虑到移动端的设计.同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发. 什么是响应式? 利用媒体查询,让同一个网站兼容 ...
- Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
- 从零开始学 Web 之 移动Web(六)响应式布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- “教你如何玩转Web响应式布局” 的更多相关文章
“教你如何玩转Web响应式布局” 的更多相关文章 网址:http://www.360doc.com/relevant/641896074_more.shtml
- 【css】25个漂亮的响应式布局的web设计【转】
响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...
- 移动Web - 响应式布局开篇
用到的工具: FireFox浏览器 Sublime Text 2 响应式布局定义: 2010年,Ethan Marcotte提出,可查看原文: 通俗地讲就是:百份比布局,根据不同设备显示不同布局: 这 ...
随机推荐
- .net使用memcached
Windows中memached安装 -------------服务器端配置 1>开始>运行:CMD(确定) 2>cd C:\memcached(回车) 3>memcached ...
- mysql 连接失败问题汇集
FHost '192.168.5.128' is not allowed to connect to this MySQL serverConnection closed by foreign hos ...
- java基础练习 12
public class Twelfth { /*海滩上有一堆桃子,五只猴子来分.第一只猴子把这堆桃子凭据分为五份,多了一个,这只猴子把多的一个扔入海中,拿走了一份.第二只猴子把剩下的桃子又平均分成五 ...
- JavaScript中数组Array.sort()排序方法详解
JavaScript中数组的sort()方法主要用于对数组的元素进行排序.其中,sort()方法有一个可选参数.但是,此参数必须是函数. 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编 ...
- Xamarin for Visual Studio 3.11.590 稳定版 破解补丁 Version 3
前提概要 全新安装请参考 安装 Xamarin for Visual Studio. Release Log 3.11.590 此版本是紧急修复(HotFix)版,重点改善了 build-tool 及 ...
- CF978A Remove Duplicates【数组操作/STL】
[链接]:CF978A [分析]:逆向思考+标记数组去重 [代码]: #include<bits/stdc++.h> using namespace std; const int INF ...
- 51nod 1051 最大子矩阵和 【最大子段和DP变形/降维】
[题目]: 一个M*N的矩阵,找到此矩阵的一个子矩阵,并且这个子矩阵的元素的和是最大的,输出这个最大的值. 例如:*3的矩阵: - - - - 和最大的子矩阵是: - - Input 第1行:M和N, ...
- bmi健康指数
#!/usr/bin/python # -*- coding: utf-8 -*- #小明身高1.75,体重80.5kg.请根据BMI公式(体重除以身高的平方) #帮小明计算他的BMI指数,并根据BM ...
- 四. Java继承和多态3. 继承中的方法的覆盖和重载
在类继承中,子类可以修改从父类继承来的方法,也就是说子类能创建一个与父类方法有不同功能的方法,但具有相同的名称.返回值类型.参数列表. 如果在新类中定义一个方法,其名称.返回值类型和参数列表正好与父类 ...
- HDU 2586 How far away? LCA 转化成RMQ
链接:http://acm.hdu.edu.cn/showproblem.php?pid=2586 [题意] 给出一个N 个和N-1条边的连通图,询问任意两点间的距离.N<=40000 . [分 ...