响应式Web设计与CSS(上)
1.一个例子
响应式Web设计最核心的一点,就是可以适配不同视口大小的流式布局。
1.1 简单上手
<div class="row">
<header class="col subcategory-header">
<h2>Lorem ipsum</h2>
</header>
<div class="col subcategory-content">
<div class="row row-quartet">
<div class="col subcategory-featured">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3><a href="#">Cras suscipit nec leo id.</a></h3>
<p>Autem repudiandae aliquid tempora quos reprehenderit architecto, sequi repellat.</p>
</article>
</div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
.row {
padding: 0;
margin: 0 -.6875em;
}
.row:after {
content: '';
display: block;
clear: both;
}
.col {
box-sizing: border-box;
padding: 0 .6875em 1.375em;
float: left;
width: 100%;
}
把列设置为浮动和100%宽度,以保证行可以包含浮动的子元素。
1.2 媒体查询
如果视口更宽一些,那就有可能在一屏之内显示更多内容。
如果媒体类型屏幕的可视窗口宽度大于等于35em,就使用相应的样式。
@media only screen and (min-width: 35em) {
.row-quartet > * {
width: 50%;
}
.subcategory-featured {
width: 100%;
}
}
@media
规则与@supports
规则相似,针对的是显示网页的环境的能力。
引入媒体查询的宽度值,叫作断点。断点相关的规则与设备类型无关,无论是手机还是其他什么设备都可以。
1.3 加入更多断点
继续增大浏览器窗口,随着空间增大,我们可以找出更高效地利用空间的方式。
@media only screen and (min-width: 50em) {
.row-quartet > * {
width: 25%;
}
.subcategory-featured {
width: 50%;
}
}
从一个纯粹的单列布局开始,然后使用媒体查询限定布局改变的条件,这正是响应式Web设计的基础。
2.响应式Web设计的起源
Ethan Marcotte发明了“响应式Web设计”:https://alistapart.com/article/responsive-web-design
虽然响应式Web设计作为一种设计思潮相对较新,但一套设计适配不同设备的想法则很早就有了。
媒体查询(及其前身,媒体类型)是在有些人呼吁适配浏览器布局技术的背景下才得以成为标准。
到了2010年,媒体查询得到了浏览器的广泛支持。
响应式Web设计正在迅速成为网页设计约定俗成的方式,并可能在将来成为“优秀Web设计”的代名词。(响应式Web设计原来指适配多种设备和多种屏幕尺寸)
CSS之外的响应性:
先加载核心资源,之后再根据设备的能力决定是否加载更多资源。比如“三明治菜单”。
3.浏览器视口
视口是浏览器显示网页的矩形区域。
要恰当地使用视口进行响应式设计,需要理解视口的原理,以及如何操纵它。
在桌面浏览器上,视口的概念很直观,就是通过CSS像素来合理利用视口中的空间。
CSS像素与屏幕物理像素之间存在一种灵活的对应关系,这个关系取决于硬件、操作系统和浏览器,以及用户是否缩放了页面。CSS像素单位为px
,即pixel的缩写。
3.1 视口定义的差别
默认视口是模拟视口。
理想视口是与设备自身尺寸接近的视口。理想视口的大小因设备、操作系统和浏览器而异。
经过优化的网站:
未经优化的网站:
为移动设备优化的网站使用的是理想视口,而未经优化的网站使用的是默认视口,其中显示的是缩小版的桌面网站。
桌面浏览器的理想视口就是其默认视口。但在智能手机和平板电脑中,就需要拆解模拟的默认视口,令其等于理想视口。这需要通过HTML中的meta
元素来做到。
移动设备中显示网页的矩形区域,我们称之为可见视口。
放大网页时,网页的某些部分会跑到可见视口之外。此时,我们看到的仍然是可见视口,而假想的那个约束“整个页面”的矩形区域,我们称之为布局视口。
3.2 配置视口
要让具有不同默认视口的设备都使用各自的理想视口,只要在页面的头部元素中添加一个小小的视口meta
标签即可。
<meta name="viewport" content="width=device-width,initial-scale=1" />
这行代码告诉浏览器,我们希望使用当前设备的理想尺寸(即device-width)作为视口宽度的基准。
initial-scale=布局视口÷可见视口
禁用缩放:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" />
有些开发者喜欢禁用缩放,以便让自己的Web应用看起来更像原生的移动应用。
在<meta>
标签中声明视口相关的配置是目前为止的推荐做法。我们还可以把视口声明放到HTML的一个style
元素里。
<style>
@viewport {
width: auto;
}
</style>
参考资料:
- 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德
响应式Web设计与CSS(上)的更多相关文章
- 响应式Web设计与CSS(下)
4.媒体类型与媒体查询 4.1 媒体类型 依据设备能力来分离样式的能力,始于媒体类型. 媒体类型用于针对特定的环境应用样式,包括屏幕显示.打印和电视等. 通过给link元素添加media属性,可以指定 ...
- HTML5、CSS3与响应式Web设计入门(2)
HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- CSS响应式web设计
参考 1. 响应式web设计之CSS3 Media Queries http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html 2. 用 ...
- 响应式WEB设计的9项基本原则
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...
- 最佳的 14 个免费的响应式 Web 设计测试工具
一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...
- [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用
原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...
- css014 响应式web设计
css014 响应式web设计 一. 响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...
- 响应式Web设计(Responsive Web design)
中文名 响应式Web设计 提出时间 2010年5月 英 文 Responsive Web design 解 释 一个网站能够兼容多个终端 目 的 解决移动互联网的浏览 优 点 ...
随机推荐
- Linux02 /Linux命令简单使用
Linux02 /Linux命令简单使用 目录 Linux02 /Linux命令简单使用 1. 远程连接Linux 2. 目录相关操作 3. 简单命令 1. 远程连接Linux 远程连接工具 Xshe ...
- js 声明变量规范和特殊变量情况
声明变量特殊情况 情况 说明 结果 var age ; console.log (name); 只声明 不赋值 undefined console.log(name) 不声明 不赋值 直接使用 ...
- (5)webpack中url-loader的使用
为什么要使用url-loader 在前面已经介绍了css文件可以使用第三方loader去加载. 在一个项目中,也不仅仅只有html,js和css文件,还有图片文件,字体文件等等.当我们给一个css样式 ...
- java 之 实例方法和类方法
类方法:使用static修饰(静态方法),属于整个类的,不是属于某个实例的,只能处理static域或调用static方法: 实例方法:属于对象的方法,由对象来调用. 判断类方法,类方法的前面有stat ...
- 技术干货:Jenkins集成GitLab
Jenkins免密拉取GitLab项目 1.在Jenkins上为GitLab创建一个专有的拉取代码的账号 Jenkins需要构建哪些项目就在GitLab给予账号相应权限 我这里已经创建过Jenkins ...
- 橘子origin游戏平台如何绑定登陆验证/二次验证码?
任天堂游戏公司4月份16万用户数据被黑客盗取,官方呼吁用户绑定二次验证码.疫情期间游戏用户暴涨,黑客活动频率也在增长,想起R星俱乐部用户绑定两步验证给十金的长期活动实在是明智之举,下面说下橘子游戏平台 ...
- C#结合SMTP实现邮件报警通知
写在前面 C#是微软推出的一门面向对象的通用型编程语言,它除了可以开发PC软件.网站(借助 http://ASP.NET)和APP(基于 Windows Phone),还能作为游戏脚本,编写游戏逻辑. ...
- 从element-ui按需引入去探索
element-ui的按需引入的配置:文档地址 npm install babel-plugin-component -D { "presets": [["es2015& ...
- Python的条件判断与循环
1.if语句 Python中条件选择语句的关键字为:if .elif .else这三个.其基本形式如下 if condition: blockelif condition: block...else: ...
- c语言大小写转化函数(包括字母和字符串)
本憨憨忘了好几次了,这次一定记住他们! 首先大小写相差32.转换的话自己写函数也是可以写出来的. 1.字母 如果是字母转的话,用toupper(),tolower() 头文件是<ctype.h& ...