响应式图片的3种解决方案-前端开发博客 最新文章
推荐文章 23138Views 3843Views 7475Views 1958Views 6529Views热门文章
38,976Views
38,455Views
23,138Views
17,450Views
13,778Views
13,424Views查看更多相关吗？百度搜索：响应式解决方案响应式网站解决方案图片的响应式布局响应式图片响应式网站 图片居中bootstrap响应式图片");原来响应式网站和自适应网站是这样来区分的原来响应式网站和自适应网站是这样来区分的丹蝶斌百家号很长一段时间以来，都以为响应式网站就是自适应网站，这是两个一样的概念。后来机缘巧合认识了一位前端大拿，给我好好上了一课，终于能把这两种网站前端表现形式给讲透了。现摘录如下：1、响应式网站由来最开始网站都会被设计成固定宽度的页面，最开始的PC显示器的分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800、900、等几种。比如 GitHub的网页就是固定宽度为1020px来定制的。后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题。在大屏显示器上整个页面显的特别小，在小屏显示器上网页又出现滚动条导致用户体验极其的差。为了解决在各种不同大小和分辨率的设备上如何正确显示网站的问题，前前后后也出现了好多种方案。提供不同版本：最开始的解决方法，是为不同的设备提供不同版本的网页。比如一个站点为PC、Mobile、Pad提供三个不同的版本。这样做固然保证了效果，但同时要维护好几个版本比较麻烦，而且网站有多个入口，会大大增加系统架构的复杂度。自适应：后来人们就开始想能不能"一次设计，普遍适用"，即让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本的页面问题。这就是所谓自适应布局解决方案。响应式： 采用自适应布局的话，如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚。为了解决这个问题而衍生出来的一种新的布局方式，那就是响应式布局。2、响应式和自适应的区别先给出两个具体例子让大家直观感受一下两种的效果：响应式网站：https://www.microsoft.com/zh-cn/自适应网站：http://m.ctrip.com/html5/响应式和自适应两种布局方式都是为了解决在不同大小和分辨率的设备上正确显示网页的问题。不同的是两种布局方式采取了不同的解决方法而矣。最开始出现的一种新的布局方式其实是宽度自适应布局。我们平时谈论的自适应布局，大部分时候指的就是宽度自适应布局。 自适应是为了解决如何才能在不同大小和分辨率的设备上呈现同样的网页。在网页内容和布局主体保持基本不变的前提下，让同一张个页面自动适应不同大小和分辨率的设备，根据设备屏幕宽度，自动调整网页内容大小。 如下图所示：自适应布局：网页内容和布局完全一样从上图可以看出采用自适应布局的话，不管设备屏幕尺寸如何变化，打开同一个页面看到的内容和布局基本上是一样的，不同的只是内容的尺寸。这样就会引发一个问题，那就是如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚，从而极大损害用户体验。响应式布局正是为了解决这个问题而衍生出来的一种新的布局方式。它可以自动识别屏幕尺寸并做出相应调整的网页设计，页面布局和展示的内容可能会随着屏幕尺寸变化而有所变化。如下图所示：响应式布局：网页内容和布局随着屏幕尺寸变化而变化网络上也有网友用这么一张图来总结响应式和自适应的区别：如上图所示，对于同一个页面（图中的Html），如果用响应式布局来处理的话，用不同设备（电脑、平板、手机）去访问此页面，最后看到的布局和内容有很大不同。而如果用自适应布局去处理的话，那不管访问设备如何的不同（上图是三台尺寸不一样的手机），最后看到的页面内容和布局基本上还是一样的，就是尺寸略有不同。进一步详细说明，如下图所示，屏幕宽度大于720像素，则4张图片并排在一行：如果屏幕宽度在不大于720像素，则4张图片分成两行：如果屏幕宽度在小于600像素话，网站主导航由平铺变成了下拉：其实响应式和自适应两种布局方式从外观上很难分辨，但从技术角度来说他们运行的机理不同。所以最后从技术角度再来总结一下两者的区别：响应式布局不管使用什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行检测设备屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，这是主动的。自适应是用户请求访问时会夹带设备信息，服务器据此做出判断并调适应对应设备样式文件+HTML内容+JS，返回给浏览器以这种方式响应不同设备。本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。丹蝶斌百家号最近更新：简介:我愿意跟你分享生活中中点点滴滴!!作者最新文章相关文章纸飞机许愿
前端路上，一路有你。编辑你的正能量，快乐工作，努力生活~
请选择弹奏的曲谱
点击开始录制，可以录制弹奏的曲子
分享钢琴节奏：博客分类：
　　如今，一个网站只在桌面屏幕上好看是远远不够的，同时也要在平板电脑和智能手机中能够良好呈现。响应式的网站是指它能够适应客户端的屏幕尺寸，自动响 应客户端尺寸变化。在这篇文章中，我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式（Responsive）。
　　当创建一个响应式网站，或让现有的网站变成响应式的，首先要关注的元素的布局。我在建立响应式的网站，总是先创建一个非响应的布局，页面宽度固定大小。如果非响应版本完成得非常不错，我再添加媒体查询（）和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个任务。
　　当你已经完成了无响应的网站，做的第一件事是在你的
页面，粘贴下面的代码到&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: }
　　完成以后，让我们看看你的布局是如何响应的。要做到这一点，我用这 Matt Kersley 创建的一款非常的。
　　一个响应式的布局是实现响应网站的第一步。现在，让我们把注意力集中在另外一个现代化网站非常重要的方面：媒体，如视频或图像。 下面的
代码将确保您的图像将永远不会大于他们的父容器，代码非常简单，适用于大多数网站。请注意，IE6 等旧的浏览器不支持 max-width 指令。
img { max-width: 100%; }
　　虽然上述技术是有效的，有时你可能需要有更多的图像控制权，例如根据客户端的显示大小，显示不同的图像。
　　这是由
发明的好方法。让我们看看 HTML：
&img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt=""&　　
　　正如你可以看到，我们使用 data-* 属性来存储替换图像的 URL。现在，让我们使用强大的
来为匹配 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);
　　令人印象深刻，是不是？现在，让我们来看看另一个在今天的网站中非常重要的媒体——视频。由于大多数网站使用的视频来自第三方网站，我决定把重点放在
的弹性视频技术，这种技术可让您嵌入的响应式的视频。
　　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&
.video-container {
padding-bottom: 56.25%;
padding-top: 30
height: 0;
.video-container iframe,
.video-container object,
.video-container embed {
width: 100%;
height: 100%;
　　在你的网站上应用了这些代码后，嵌入的视频也是响应式（Responsive）的了。
　　本教程的最后一步绝对非常重要，但往往被网站开发人员忽视——字体。到现在为止，大多数开发人员（包括我自己）使用像素来定义字体的大小。虽然 像素在普通网站使用是OK的，但是对于响应式网站来说应该有响应式的字体。事实上，一个响应式的字体大小应关联它的父容器的宽度，这样它才可以适应客户端 的屏幕。
　　 规范引入了一个新的单位叫 rem，和 em 类相似，但相对于
元素来说， rem 更易于使用。
　　rem 是相对于 HTML 元素的，不要忘了重置 HTML 的字体大小：
html { font-size:100%; }
　　完成后，您可以定义响应式的字体大小，如下所示：
@media (min-width: 640px) { body {font-size:1} }
@media (min-width:960px) { body {font-size:1.2} }
@media (min-width:1100px) { body {font-size:1.5} }
　　请注意，旧浏览器不支持 rem 单元，所以不要忘了实现一个替代。
　　这就是今天的所有内容了，希望你会喜欢这个教程！记得推荐和分享啊！
原文链接：
编译来源：
来自: 洛杉矶
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
这php留言板确实不错
试试 pageoffice 在线打开 PDF 文件吧. pag ...
opacity: 0.5; 个人喜欢这种方式！关于其他css特 ...
推荐用StratoIO打印控件，浏览器和系统的兼容性都很好，而 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'}