下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

把自己的网站变成响应式3个简单步骤的实用技巧

作者:网站响应式技巧     来源: www.kokojia.com点击数:2967发布时间: 2015-09-21 11:34:53

标签: 网站响应式实用技巧

Web开发

从今天来看,一个网站是不够的,只有好看的桌面屏幕上,同时也对平板电脑和智能手机可以是一个很好的展示。响应网站意味着它可以适应客户端的屏幕尺寸,自动改变大小响应于客户端。在这篇文章中,我会告诉你这是多么容易通过三个简单的实用技巧步骤,使网站成为一个响应式。
 
把自己的网站变成响应式3个简单步骤的实用技巧
 
1--布局
当你创建一个反应灵敏的网站,或者让成响应布局的现有的网站,首先要注重的元素。我建立反应灵敏的网站,总是先创建一个无响应的布局,页面宽度固定大小。如果不答复的版本做得非常好,我会加入媒体查询(媒体查询)和反应代码。这种操作方式更容易实现响应特性,在相同的时间专注于一个任务。
当你完成了反应迟钝的网站,做的第一件事就是在你的HTML页面,下面的代码粘贴到的和标签。这将设置在屏幕上1:1尺寸的显示器提供了网站浏览iPhone和其他智能手机的浏览器的完整视图,并禁止用户缩放网页。
把自己的网站变成响应式3个简单步骤的实用技巧
现在是时候添加一些媒体的质疑。根据W3C网站,媒体查询的媒体类型和零个或多个媒体查询表达式的条件。通过使用媒体查询,呈现的外观可以针对输出设备的特定范围,而不改变内容本身。换句话说,媒体查询,使您的网站上各种不同的显示器看起来不错,从小到大的智能手机电脑屏幕等。
媒体的询问取决于你的网站布局,所以对我来说,为您提供了一个现成的代码片段,可以用来有点困难。然而,对于大多数网站下面的代码是一个很好的起点。在这个例子中,#初级是主内容区域,#次级是一个侧杆。
正如你可以从上面的代码中看到,我定义了两个指标:首先有一个最大宽度为1060px,为平板电脑优化的景观。 #primary占父容器的宽度的67%,#senondary占30%,再加上的左边缘3%。第二个标准是平板电脑和屏幕尺寸较小。
由于智能手机的小屏幕尺寸,我决定成立100%#primary宽度,#二次也创下了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; }
}
完成后,让我们看看你的反应如何布局。要做到这一点,我用这个马特Kersley创造了一个非常敏感的测试工具。
 
2,媒体
一个响应布局是实现一个响应网站的第一步。现在,让我们专注于增加了一个现代化的网站的一个非常重要的方面:媒体,如视频或图像。下面的CSS代码将确保您的照片将永远不会大于他们的父容器,代码很简单,对于大多数站点。请注意,IE6等旧版的浏览器不支持最大宽度的指令。
img { max-width: 100%; }
虽然上述技术是有效的,有时你可能需要有更多的控制图像,例如客户端的显示大小,显示不同的图像。
这是由尼古拉斯·加拉格尔发明的好方法。让我们来看看HTML:
把自己的网站变成响应式3个简单步骤的实用技巧
正如你所看到的实用技巧的方法,我们用数据 - *属性来存储替换图像的URL。现在,让我们用强大的CSS3指定替换图像相匹配的媒体分设备宽度的状态:
@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);
}
}
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%;
}
在您的网站应用了这些代码,嵌入视频的响应(响应)。
 
3 - 字体
本教程的最后一步绝对是非常重要的,但往往忽略了网站开发者 - 字体。到现在为止,大多数开发者(包括我自己)用像素来定义字体的大小。而在一个正常的网站使用的像素是确定的,但对于敏感的网站应该有字体的响应类型。事实上,字体大小的响应风格应与其父容器的宽度相关联的,因此,它可以适合于客户端的屏幕上。
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单元,所以不要忘记实现替换。这就是今天,我希望你会喜欢这个实用技巧的教程!来自:编辑从其他媒体精选Web开发教程相关文章转载,仅供网友学习和交流.了解更多IT技术相关资讯或视频教程欢迎进入课课家教育查询详情。

赞(33)
踩(5)
分享到:
华为认证网络工程师 HCIE直播课视频教程