网页根据不同设备不同尺寸不同分辨率的屏幕自动适配

响应式设计简介
- 前言
- 响应式与自适应的区别
- 响应式设计的优缺点
响应式布局的一些技术点：
- 1、允许网页的宽度自动的调整。
- 2、百分比宽度布局
- 3、相对大小单位
- 4、流动布局 float:left|right
- 5、栅格化布局Bootstrap
- 6、弹性布局flexbox
- 6、选择加载css
- 7、媒体查询@media
- 8、图片的自适应

响应式设计简介

前言

最近开发过程中许多同事都来问我关于不同分辨率的电脑访问的Web页面出现挤压、变形、重叠、错位等各种自适应问题。本来我们主要是做PC端，但是随着移动互联网的到来，用户对我们的网站提出了更高的要求，我们的网站不仅需要满足不同电脑端客户的浏览需求，还需要考虑到用户通过移动手机、平板电脑以及各种不长见的异形屏幕设备来访问我们的网站。此时我们的网站就需要适应对平台的用户访问，所以我们需要的不是一个普通网站，我们需要一个响应式的网站。当然，关于自适应方案，百度一搜就会有一大堆结果，但是这里我个人总结了一些适应新互联网环境下的响应式网站解决方案，希望对你有所帮助。

响应式与自适应的区别

可能许多同仁都混淆了响应式和自适应的概念。先给大家体验一下响应式和自适应的区别，请放大缩小一下屏幕尝试

自适应的体验：http://m.ctrip.com/html5/
响应式的体验： http://segmentfault.com/

响应式定义：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。
自适应定义：自适应是为了解决如何才能在不同大小的设备上呈现同样的网页。

响应式设计的优缺点

优点：

响应式网页的兼容性高
用户体验佳
利于SEO优化
开发成本投入低
节约时间成本提高转换率

缺点：

响应式设计对于IE6,7,8浏览器简直是悲剧
响应式设计仅是改善移动体验并没达到最优化
响应式网站无法区分移动端，浪费带宽，加载耗时长

响应式布局的一些技术点：

下面代码示例中的一段公共代码：

<div class="rwd-header">Header</div>
<div class="rwd-content"><div class="rwd-content-left">Left</div><div class="rwd-content-body"><div class="rwd-content-bodyTop">Top Content</div><div class="rwd-content-bodyBottom">Bottom Content</div></div><div class="rwd-content-right">Right</div>
</div>
<div class="rwd-footer">Footer</div>

源码下载

1、允许网页的宽度自动的调整。

首先，< meta >标签有很多种，而这里要着重说的是viewport的meta标签，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。简单的理解，视窗viewport就是是严格等于浏览器的窗口。在网页代码的头部，我们加入一行元标签来定义视窗宽度。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=yes">

viewport是网页默认的宽度和高度，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

2、百分比宽度布局

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

width: 50%;
width:auto;

凡是需要指定像素宽度的地方都可以通过指定百分比宽度来替代，同时还可以配合css的cal，进行计算宽度，所以我们提倡尽量少使用绝对宽度。

3、相对大小单位

 body {font: normal 100% Helvetica, Arial, sans-serif;}

px相对于像素点的绝对大小的单位。字体最好不要使用绝对大小（px）写死，如果要使用px,也尽量使用偶数，当然奇数也可以，但是不要使用小数，因为小数可能会导致字体渲染不均匀出现字体模糊失真的情况。

em（font size of the element）

em是指相对于父元素的字体大小的单位。计算规则是依赖于父元素，如当前对象行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem（font size of the root element）

rem是指相对于根元素的字体大小的单位。计算规则是依赖于根元素。

4、流动布局 float:left|right

相信float也是大家最常用的布局方式之一，但是设置了float的元素都会脱离文档流，各个区块的位置都是浮动的，不是固定不变的。

.rwd-content-left,
.rwd-content-body,
.rwd-content-right {float: left;
}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

.rwd-content::after {content: "";clear: both;display: block;
}

注意：使用浮动过后，需要清除浮动，否则会影响后面的非浮动元素。

5、栅格化布局Bootstrap

采用bootstrap的的网格系统来进行页面布局划分。要实现自己想要的页面效果就需要结合百分比和div嵌套来实现

6、弹性布局flexbox

6、选择加载css

自动探测屏幕宽度，然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
除了用html标签加载CSS文件，还可以使用Less在现有CSS文件中加载。

@import  url("tinyScreen.css") screen and (max-device-width: 400px);

7、媒体查询@media

通过@media可以针对不同的屏幕尺寸设置不同的样式

@media only screen and (max-width: 1024px) {.rwd-content-left {width: 30%;}.rwd-content-body {width: 70%;}.rwd-content-right {width: 100%;}
}@media only screen and (max-width: 768px) {[class*="rwd-content-"] {width: 100%;}
}

@media做的事完全可以用javascript代替，用js添加一个class或者直接用js修改css属性。优点是浏览器全兼容，缺点就是用js性能不如css。

8、图片的自适应

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码：

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img { -ms-interpolation-mode: bicubic; }

或者可以使用Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {var imgs = document.getElementById("content").getElementsByTagName("img");imgSizer.collate(imgs);});

不过最好还是根据不同大小的屏幕，加载不同分辨率的图片

Web页响应式设计的一些解决方案相关推荐

android 类的设计,Android App的类响应式设计
导言根据google的官方显示Android 4.0以上的设备已经有34.2%,由于国内很多的手机都没机会用上google play市场,所以国内市场的情况,得看类似于友盟的季度报告才知道了.个人觉 ...
响应式设计布局要不要了解一下？
写在前面我们正在跑步进入移动互联网时代,所以针对移动环境下web开发响应式设计成为发展的一个必然的趋势.所以这几天一直没更新文章,也是在准备怎么写关于这个响应式设计,毕竟用可以,但是想写的明白还是需 ...
web设计经验一提升移动设备响应式设计的8个建议
今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议一.直观性和易用性在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...
各种风格简洁单页响应式html5模板_简洁响应式单页跳转设计案例源码340多套订餐企业模板高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响
各种风格简洁单页响应式html5模板_简洁响应式单页跳转设计案例源码340多套订餐企业模板高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响 ...
《响应式Web设计性能优化》一1.1　响应式设计存在的问题
本节书摘来异步社区<响应式Web设计性能优化>一书中的第2章,第2.1节,作者: [美]Tom Barker 译者: 余绍亮 , 丁一 , 叶磊责编: 赵轩,更多章节内容可以访问云栖社区 ...
响应式web设计-第一章 HTML5、CSS3及响应式设计入门
1.手机上浏览的网页越多,需要优化的东西越多.放大缩小页面,然后为了看到视口外的文字,再左右拖动大多数情况,根据视口大小为用户提供与之匹配的视觉效果还是优先选择.(字体大小要调整) 一句话概括响应 ...
Web前端知识CSS（响应式设计）
1.什么是响应式设计也叫响应式布局,响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式. 响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局,从而在每种设备屏幕宽度下呈现的界面是不同的 ...
响应式设计的真正挑战：RSS
本文讲的是响应式设计的真正挑战:RSS, web 世界丰富多彩,去看看服务器日志吧.那里充斥着爬虫机器人以及运行着各种操作系统,有着各种屏幕尺寸的移动设备和用户代理.你很容易会因为自己使用 web 的 ...
前端设计响应式设计_响应设计简介
前端设计响应式设计 "Responsive Design" as a buzzword has reached peak popularity: we now have book ...

Web页响应式设计的一些解决方案