响应式Web设计技巧以及入门技巧

html5和css3流行至今,我在做响应式的网站一直是在“尝试”的阶段。并没有深入的去研究和学习,浅显的理解就是根据屏幕分辨率的大小,网站布局、图片、文字大小等相应改变。以后使用平板、手机浏览网站的用户会越来越多,对于前端设计师,学好用html5、css3做响应式网站是势在必行。

响应式网页设计这个术语,由伊桑马克特提出,他在Alist Apart 发表了一篇开创性的文章,将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来,并命名为响应式网页布局。还有一些其他叫法,如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。

以往我们显示针对桌面电脑来进行宽度设计,然后将其缩小并针对小屏幕进行内容重排;现在我们应该首先针对小屏幕进行设计,然后逐步增强针对大屏幕的设计和内容。

三个简单步骤,让你的网站变成响应式网站

ios和Android浏览器都基于Webkit核心。这两种浏览器以及很多其他浏览器如chrome、opera,都支持用viewport meta元素覆盖默认的画布缩放设置,只需要在html的标签中插入一个标签。标签中可以设置具体的宽度或者缩放比例。

示例:

<meta name="viewport" content="width=device-width,initial-scale=2,maximum-scale=3,user-scalable=no">

分析:

width=device-width告诉浏览器页面的宽度应该等于设备宽度;initial-scale=2页面的缩放比例,设置比例为设备尺寸的2倍;maximum-scale=3,允许用户将页面最多放大至设备宽度的3倍;user-scalable=no禁止用户缩放。缩放是一个重要的辅助功能,所以实践中很少禁用。

  1. 粘贴下面的代码到和标签之间:
<meta name="viewport" content="width=device-width,initial-scale=1.0">

设置比例为1.0这表示浏览器将按照其视口的实际大小来渲染页面

  1. 针对不同视口宽度修正设计

设置viewport meta 标签后,现在我们针对不同视口修正设计效果,创建CSS样式表,并在页面中调用:

常见媒体查询

/* 平板电脑布局: 481px 至 768px。样式继承自: 移动设备布局。 */

@media only screen and (min-width: 481px) {

.class{

    background: #333;

}

}

/* 桌面电脑布局: 769px 至最高 1232px。样式继承自: 移动设备布局和平板电脑布局。 */

@media only screen and (min-width: 769px) {

 .class {

    background: #666;

}

}

  1. 字体、弹性图片、视频

对于响应式网站来说应该有响应式的字体,一个响应式的字体大小应关联它的父容器的宽度,这样它才可以适应客户端的屏幕。

CSS3 规范引入了一个新的单位叫 rem,和 em 类相似,但相对于 HTML 元素来说, rem 更易于使用。

rem 是相对于 HTML 元素的,不要忘了重置 HTML 的字体大小:

html { font-size:100%; }

完成后,您可以定义响应式的字体大小,如下所示:

@media (min-width: 640px) { body {font-size:1rem;} } 

@media (min-width:960px) { body {font-size:1.2rem;} } 

@media (min-width:1100px) { body {font-size:1.5rem;} }

请注意,旧浏览器不支持 rem 单元,所以不要忘了实现一个替代。

弹性图片

我们需要为图片设置max-width:100%和height:auto,来实现其弹性化。对于IE,仍然需要一点额外的工作:

img {

    max-width: 100%;

    height: auto;

    width: auto\9; /* ie8 */

}

弹性内嵌视频

同样的,对于视频,我们也需要做max-width: 100%的设置;但是Safari对embed的该属性支持不是很给力,所以我们以width: 100%来代替:

.video embed,

.video object,

.video iframe {

    width: 100%;

    height: auto;

}

PS:觉得不错记得转发哟!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据挖掘DT机器学习

如何用R语言从网上读取多样格式数据

第一部分:数据信息 生活中,我们面临着各种各样的数据:比如你的成绩单,比如公司的财务报表,比如朋友圈的一些状态,比如微信里的一段语音……我们生活的大数据时代的一...

2895
来自专栏企鹅号快讯

涨知识,原来可以这样用 CSS 来追踪用户

英文:jbtronics 译文:枫上雾棋 https://segmentfault.com/a/1190000012901505 ? 除了使用 JS 追踪用...

1966
来自专栏全栈工程师成长之路

深入浅出学习前端开发(入门篇)前言

37313
来自专栏大数据挖掘DT机器学习

如何用R语言从网上读取多样格式数据

第一部分:数据信息 生活中,我们面临着各种各样的数据:比如你的成绩单,比如公司的财务报表,比如朋友圈的一些状态,比如微信里的一段语音……我们生活的大数据时代的一...

3397
来自专栏不二小段

【一起学Python】爬取前程无忧招聘信息并写入Excel

说在前面:这是依旧是来自Ricky的爬虫小实战。预告一下未来的几个主要内容吧,打算重写一下微信公众号后台,然后写几篇教程;之后是有关分词、词云、情感分析的一些内...

3406
来自专栏大史住在大前端

大前端的自动化工厂(2)—— SB Family

原文链接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f

633
来自专栏HTML5学堂

聊一聊“@font-face”

在@font-face处理兼容中出现了一个#iefix这个东东?到底是神马东西呢? 案例: ? 首先先了解关于@font-face的基本知识 1、@font-...

2795
来自专栏Python绿色通道

Python爬虫:使用Python动态爬取冯大辉老师微博,再用词云分析

冯大辉老师在程序员圈子中还是比较出名的,大部分都知道他这个人,性格很鲜明。他现在正在创业,公司叫无码科技,他有一个公众号叫小道消息,新榜给的活跃粉丝是30多万数...

771
来自专栏猿人谷

C++ STL编程轻松入门基础

C++ STL编程轻松入门基础 1 初识STL:解答一些疑问 1.1 一个最关心的问题:什么是STL 1.2 追根溯源:STL的历史 1.3 千丝万缕的联系 ...

1899
来自专栏有趣的django

Django+xadmin打造在线教育平台(四)

代码 github下载 七、授课机构功能 7.1.模板继承 (1)创建母板 把org-list.html拷贝到templates目录下,新建base.html...

4585

扫码关注云+社区