怎么根据设计图做出响应式网页_响应式中ipad的设计图是1536的那怎么换算

1、响应式网站的图片需要针对不同多个设备制作多个尺寸么？

笔者做响应式网站多年，开始的时候，我让美工做好几套设计图，运用媒体查询设置断点，以适配不同的范围段，320-639、640-1079、大于1080等，后来，我使用rem只使用一套设计图就可以了。
使用Javascript控制根元素的默认字体大小

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 1400) + 'px';
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

2、响应式设计怎么让图片自适应

总结起来就两条：
1.怕麻烦，width设成100%妥妥的。
2.不怕麻烦，媒体查询一个个的分辨率情况下设置。

3、响应式中ipad的设计图是1536的那怎么换算

响应式抄Web设计(Responsive Web design)的理念是：

页面的设袭计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。目前国软科技公司自主研发了同步的响应式网站设计。
做响应式的时候，需要考虑的是1024 * 768、768 * 1280、640 * 960、320 * 480的分辨率，其他的都不怎么考虑。

1024 * 768 是一般电脑屏幕分辨率；
768 * 1280是平板横着时的分辨率
640 * 960是平板竖着时的分辨率
320 * 480是iphone手机的屏幕分辨率。

4、怎样将图片转哈成响应式

1、首先图片分为背景图片和通过img标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。
2、是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片，宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。
3、响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。
4、图片设置 max-width 至于是不是要设置多张不同尺寸的图片应该是看你的需求到底是针对哪些人群如果设置多张建议两张就够了设置一张稍微大点的等比缩放也是不错的选择个人习惯是设置宽度跟max-width

5、做响应式网站，是不是要先制作好H5响应式模板呢？

响应式布局概念
Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

经过不停地学习和实践，如今总结响应式设计的方法和注意点。其实很简单。
响应式设计的步骤
1. 设置 Meta 标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

[1]（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。）
3. 通过媒介查询来设置样式 Media Queries
Media Queries 是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}

这里的样式就会覆盖上面已经定义好的样式。
4. 设置多种试图宽度
假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

恩，差不多就这样的一个原理。
一些注意的
1. 宽度需要使用百分比
例如这样：
#head { width: 100% }
#content { width: 50%; }

2. 处理图片缩放的方法
简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。
img { width: auto; max-width: 100%; }

用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能： HTML 结构：
<img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
alt="">

CSS 控制：
@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);
}
}

6、响应式设计同一张图片分别用img和background调用，如何让他们自适应屏幕的大小？显示的效果一样

img的思路：JS获取IMG的长宽比例，然后获取容器的长宽比，如果容器的长：宽大于或者等于IMG的长宽比例，就把IMG的宽度设置成100%，高度auto，反之则把IMG的高度设置成100%，宽度auto。在CSS里面添加img{margin:0 -100%}，用display:tabel-cell来做垂直居中(未实验)。

background的实现方法(CSS3)：用background必须要CSS3才能自适应，代码是

background-size:cover;backgrond-attachment:fixed;background-position:center;

效果一样

7、响应式图片技术的思想是什么呢？

响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。响应式设计，就是同一个页面文件，在不同的设备端呈现不同的样子。在我看来，它的缺点有页面加载的代码多了，导致文件增大了，影响加载速度。为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码，这影响了页面加载速度。尤其是js代码，若处理不好，在配置低的机子上浏览会很卡。

虽然可以通过某些技术选择性地加载响应式设计代码，但浏览器对这方面的机制支持还不够完善。在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辩率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度。虽然现在有各种智能判断设备特性而加载不同图片或视频的技术，但浏览器支持同样不够完善。对大型门户或电商网站来说，响应式设计目前确实不太适合。

8、网站里用JS文件做图片广告，怎么把这个图片广告做成响应式的？

使用来css3进行各个屏幕端的自css样式构造，如：

.wd {
    width:1280px;
    height:200px;
    background:red;
}

@media(max-width:1280px){
    .wd{
        width:960px;
        height:160px;
        bakcground:yellow;
    }
}

每范围的屏幕大小均可定义不同的css.

9、做了个响应式的网站，地图不能相应，地图能做出响应式的吗

可以的，可以网络一下响应式地图制作

10、如何解决响应式网站图片响应问题

如果图片是以背景方式存在，这种比较好解决，可以采用媒体查询，为不同尺寸的显示回终端设置不同图片。但答，如果是网页中插入的图片解决起来就比较复杂一点了。
一、采用srcset属性，如下代码
<img src="默认图片" alt="" srcset="1倍大图 600w 200h 1x, 2倍大图 600w 200h 2x, 小图 200w 200h">
srcset里面是根据媒体查询条件显示不同图片，跟上面差不多一样，表达方式不一样，1x表示显示器像素密度显示倍数。
两者结合的方式实现，各大浏览器最新的版本基本都支持，但是IE系列的不支持，比较严重的问题是QQ浏览器以IE为内核，微信浏览器不支持，而微信在国内的使用率非常高，加之微信公众平台的微官网是客户的常见需求,好的解决办法是使用Picturefill。
二、采用picture元素，如下代码
<picture alt="">
<source src="大图路径" alt="" media="(min-width: 640px)">
<source src="小图" alt="" media="(max-width: 639px)">
<img src="默认图片" alt="" alt="">
</picture>

导航:首页 > 万维百科 > 怎么根据设计图做出响应式网页

怎么根据设计图做出响应式网页

与怎么根据设计图做出响应式网页相关的知识