文档章节

《实用技巧》——让你的网站变成响应式的3个简单步骤

fjxichao
 fjxichao
发布于 2015/01/15 10:39
字数 1741
阅读 8
收藏 0

  如今,一个网站只在桌面屏幕上好看是远远不够的,同时也要在平板电脑和智能手机中能够良好呈现。响应式的网站是指它能够适应客户端的屏幕尺寸,自动响应客户端尺寸变化。在这篇文章中,我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式(Responsive)。

您可能感兴趣的相关文章

 

1 – 布局

  当创建一个响应式网站,或让现有的网站变成响应式的,首先要关注的元素的布局。我在建立响应式的网站,总是先创建一个非响应的布局,页面宽度固定大小。如果非响应版本完成得非常不错,我再添加媒体查询(Media Queries)和响应式代码。这种操作方式更容易实现响应式特性,在同一时间专注于一个任务。

  当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到<head>和</head>标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。

 

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

 

  现在是时候添加一些媒体查询了。根据 W3C 网站,媒体查询由媒体类型和零个或多个媒体查询的条件表达式组成。通过使用媒体查询,外观呈现可以针对特定范围内的输出设备,而不需要改变内容本身。换句话说,媒体查询让您的网站在各种各种显示器上看起来都很好,从小的智能手机到大的电脑屏幕等等。

  媒体查询取决于你的网站布局,所以对我来说为您提供一个现成可以使用的代码片段有点困难。但是,下面的代码对于大多数网站都是一个很好的起点。在这个例子中,#primary 是主要内容区域,#secondary 是侧栏。

  从代码中你可以看到,我定义了两种规格:首先有一个最大宽度为1060px,为平板电脑优化的横向显示。#primary 占在其父容器宽度的67%,#senondary 占30%,再加上3%的左外边距。 第二个规格是用于平板电脑和更小的屏幕尺寸。

  由于智能手机的屏幕尺寸小,我决定给 #primary 设置100%的宽度,#secondary 也设置100%的宽度,他将在 #primary 下面。 正如我已经说过的,你可能必须要对这段代码位进行修改才能适应您的网站的具体需求。

 

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

  完成以后,让我们看看你的布局是如何响应的。要做到这一点,我用这 Matt Kersley 创建的一款非常的响应式测试工具

 

2 – 媒体

  一个响应式的布局是实现响应网站的第一步。现在,让我们把注意力集中在另外一个现代化网站非常重要的方面:媒体,如视频或图像。 下面的 CSS 代码将确保您的图像将永远不会大于他们的父容器,代码非常简单,适用于大多数网站。请注意,IE6 等旧的浏览器不支持 max-width 指令。

 

img { max-width: 100%; }

 

  虽然上述技术是有效的,有时你可能需要有更多的图像控制权,例如根据客户端的显示大小,显示不同的图像。

  这是由 Nicolas Gallagher 发明的好方法。让我们看看 HTML:

 

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

  

  正如你可以看到,我们使用 data-* 属性来存储替换图像的 URL。现在,让我们使用强大的 CSS3 来为匹配 min-device-width 条件的媒体指定替换图像:

 

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

  

  令人印象深刻,是不是?现在,让我们来看看另一个在今天的网站中非常重要的媒体——视频。由于大多数网站使用的视频来自第三方网站,我决定把重点放在 Nick La 的弹性视频技术,这种技术可让您嵌入的响应式的视频。

  HTML:

<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

  

  CSS:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

  在你的网站上应用了这些代码后,嵌入的视频也是响应式(Responsive)的了。

 

3 – 字体

  本教程的最后一步绝对非常重要,但往往被网站开发人员忽视——字体。到现在为止,大多数开发人员(包括我自己)使用像素来定义字体的大小。虽然像素在普通网站使用是OK的,但是对于响应式网站来说应该有响应式的字体。事实上,一个响应式的字体大小应关联它的父容器的宽度,这样它才可以适应客户端的屏幕。

  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 单元,所以不要忘了实现一个替代。

  这就是今天的所有内容了,希望你会喜欢这个教程!记得推荐和分享啊!

 

 

原文链接:Making a website responsive in 3 easy steps

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文转载自:http://www.cnblogs.com/lhb25/archive/2013/03/06/making-a-website-responsive-in-3-easy-steps.html

fjxichao
粉丝 4
博文 67
码字总数 16562
作品 0
西安
程序员
私信 提问
[译]响应式 Iframe - 正确的打开方式

原文作者:BEN MARSHALL 原文链接: Responsive Iframe — The Right Way (CSS Only)! 译者:snow 喜欢理由:让你的 iframe 变成响应式 引言 这周公司安排了一个需求,设计一个响应式布局。由...

snowLu
04/10
0
0
十大前端开发框架(上)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:site point。欢迎加入翻译组。 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部...

伯乐在线
2013/07/16
0
0
4个最常见的APP概念区分及比较

原文出处:Aaron Carpenter 译文出处:@凌霜设计 译者注: 现在关于移动应用的概念有许多:Native App, Responsive Web, Web App, Hybrid App,搞清楚这几个概念的区别和各自的优劣对于设计师...

Aaron Carpenter
2015/09/22
0
0
知道吗?9个搜索引擎优化(SEO)最佳实践

  作为网页设计师,搜索引擎优化重要吗?我们知道,网站设计是把屏幕上平淡无奇变成令人愉快的美感,更直观地辨认信息。这也是人与人之间在沟通想法,这样的方式一直在演变。穴居人拥有洞穴...

秋天风景
2014/09/17
0
0
有关 Web 响应式设计的 7 点启发

开发者视角中的优秀并不意味着用户也有同样的感受。国外知名电子商务网站 Lot18 的高级前端开发人员Vince Allen,特别撰文讲述了采用响应式设计开发 Lot18 的背后故事和7条经验。 全文如下:...

虫虫
2012/02/13
2.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

kubernetes API 访问控制在阿里云容器服务(ACK)上的实践

提起K8s API的访问控制,很多同学应该都会想到RBAC,这是K8s用来做权限控制的方法,但是K8s对API的访问控制却不止于此,今天我们就来简单介绍下K8s的访问控制以及ACK如何利用这套方法提供便捷...

zhaowei121
29分钟前
1
0
从HelloWorld看Knative Serving代码实现

概念先知 官方给出的这几个资源的关系图还是比较清晰的: 1.Service: 自动管理工作负载整个生命周期。负责创建route,configuration以及每个service更新的revision。通过Service可以指定路由流...

迷你芊宝宝
29分钟前
1
0
如何防止http请求数据被篡改

故事的开始,面试官问了我一个问题: 如何防止http请求中数据被篡改? 回答: 1.设置客户端IP黑/白名单 1.1.客户端所有请求,请求到代理服务器(nginx),代理服务器维护黑/白名单的ip,决定是...

太猪-YJ
33分钟前
2
0
好程序员大数据笔记之:Hadoop集群搭建

在学习大数据的过程中,我们接触了很多关于Hadoop的理论和操作性的知识点,尤其在近期学习的Hadoop集群的搭建问题上,小细节,小难点拼频频出现,所以,今天集中总结以下笔记,希望对各位同学...

好程序员IT
40分钟前
1
0
MySql用navcat连接时报错 2509

在8版本以后的MySql默认的加密方式都改为了caching_sha2_password 因此进入mysql的命令行更改加密方式即可 ALTER USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER......

lanyu96
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部