关键词：
响应式设计与自适应设计
相信从事前端页面设计的人都知道，页面呈现的效果及用户体验是非常重要的。当今社会移动设备的使用已超过了pc端，面对不同分辨率的设备，怎样做到页面体验的效果一样呢？这就成了最头疼的事情。
下面我们来看看响应式设计与自适应设计两者用法：
响应式Web设计(Responsive Web Design) ：主要利用CSS3的媒介查询（Media Query）和Viewport来解决问题。通过媒介查询的设置，根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。
具体使用方法如下：
1、meta标签的viewport属性
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”/>
视窗宽度width=device-width为设备宽度
视窗缩放initial-scale=1为不可缩放状态 maximum-scale=1为不可放大
user-scalable=0 是否允许用户调整缩放，如果设置为yes则允许用户对其改变，反之则为no，如果设置为no，那么minimum-scale和maximum-scale都将被忽略，用为根本不可能缩放。所有缩放的值都必须在0.01-10的范围之内。
2、media query（两种方式）
a：通过link标签
<link rel=”stylesheet” type=”text/css” media=”screen and(max-width: 600px)” href=”style1.css”/>
示例代码代表当前屏幕宽度小于600px的时候，加载style1.css文件来渲染页面。
b：CSS中直接设置
@media screen and(max-width: 600px){
/* 具体的CSS属性设置 */
}
从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了CSS基本语法。
3、优点
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
4、缺点
兼容各种设备工作量大，效率低下
代码累赘会出现隐藏无用的元素，加载时间加长
一定程度上改变了网站原有的布局结构，会出现用户混淆的结果
自适应网页设计（Adaptive Web Design）：指能使网页自适应显示在不同大小终端设备上新网页设计及技术。
主要注意的问题如下：
1、首先在网页代码头部，加入一行viewport元标签
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”/>
所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js
<!—[if lt IE 9]>
<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]-->
2、不使用绝对宽度，由于网页会根据屏幕宽度调整布局，不能使用width: xxx px具体的像素值，使用百分比width:xxx %或者width:auto
3、相对大小的字体，字体也不能使用绝对大小（px），而只能使用相对大小（em）设置body字体为100%，即字体大小是页面默认大小的100%，也是16px。例如：p{ font-size: 1.5em; }，即p的大小是默认大小的1.5倍（24px（ 24/16=1.5 ））。
4、流动布局：各个区块的位置都是浮动的，不是固定不变的。
.left {
float: left;
width: 20%;
}
.right {
float: right;
width: 75%;
}
Float的好处是，如果宽度太小放不下两个元素，后面的元素会自动滚到前面元素的下方，不会再水平方向溢出，避免了水平滚动条的出现。注：绝对定位（position: absolute）的使用，也要非常小心。
5、图片的自适应
img { max-width: 100%; height: auto }
这行代码对于大多数嵌入网页的视频也有效果，所以可以写成：
img object { max-width: 100%; height:auto}
老版本的Ie不支持max-width，所以只好写成：
img { width: 100%; height:auto}
此外，windows平台缩放图片时，可能出现图像失真现象，这时可以尝试使用IE的专有命令：
Img { -ms-interpolation-mode: bicubic }
或者Ethan Marcotte的imgSizer.js
addLoadEvent(function(){
var imgs = document.getElementById(“content”).getElementsByTagName(“img”);
imgSizer.collate(imgs);
})
注：自适应网页设计的核心，就是CSS3引入的Media Query模块，与响应式布局设计的使用一样。
两者区别与选择：
理论上说，响应式布局在任何情况下都比自适应布局好一些，但在某些情况下自适应布局更切实际。
自适应布局可以让你的设计更加可控，因为你只需要考虑了了几种状态就万事大吉了。但在响应式布局中你可能需要面对非常多状态——是的，大部分状态之间的区别很小，但它们又的确是不同的——这样一来就很难确切搞清你的设计会是什么样。同时这也带来了测试上的难题，你很难有绝对的把握预测到它会怎样。换个角度说，这也是响应式布局的魅力所在。通过允许表面上的不确定因素存在，你可以获得更高层次上的确定。虽然你无法在精确到像素级别准确预知你的设计如何在943px×684px视觉区域汇中展示，但你能确定的是它们一定能展示的很好——不管是表层特征还是布局结构都有条不紊。
自适应布局有它自己的优势，因为它们实施起来代价更低，测试更容易，这往往让他们成为更切实际的解决方案。自适应布局可以看做响应式布局的“穷兄弟”，在资源有限的情况下就可以让它出马。特别是改进现有网站的时候尤其奏效，因为全部重写代码在这时并不可行。这种案例中，采用自适应布局是一个不错的出发点。
其实无论是哪种设计理念都是各有优缺的，还是要从个人实际去求出发去选择！
响应式布局
响应式布局响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是css写的比较多。响应式设计与自适应设计的区别：响... 查看详情
自适应和响应式布局的区别，em与rem
...图片，等位置排版都是一样的，只是大小不同。 响应式布局：通过媒体查询监听屏幕大小的变化，做出响应式的改变，在不同设备可能展现不同的样式效果。 em:是相对其父元素的。 rem:相对于页面根元... 查看详情
使用min-content实现容器宽度自适应于内部元素(代码片段)
...方面及其上下文，并创建适合于内容的设计HTML原生就是响应式的（HTML内容在视口内流式的分布）。随着CSS的广泛应用，设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中，这有悖于HTML原生响应的特性。过去几... 查看详情
使用min-content实现容器宽度自适应于内部元素(代码片段)
...方面及其上下文，并创建适合于内容的设计HTML原生就是响应式的（HTML内容在视口内流式的分布）。随着CSS的广泛应用，设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中，这有悖于HTML原生响应的特性。过去几... 查看详情
reactnative自适应设备宽度解决方案
...像素单位（IOS的尺寸单位为pt，Android的尺寸单位为dp）在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。UI给默认640的图，采用pxToDp函数，即可将UI等比放大到机器上。import{Dimensions}from‘react-native‘;//58app只有竖屏模... 查看详情
css3响应式布局（媒体查询@media）(代码片段)
CSS3响应式布局（媒体查询@media）1响应式布局2媒体查询2.1媒体类型2.2逻辑运算符2.3媒体特性3案例：根据页面宽度改变背景色1响应式布局响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式... 查看详情
css框架prue实现自适应和响应式
什么是响应式和自适应？1、响应式：样式会随着屏幕大小改变，同一页面设备不同样式不同2、自适应：不管屏幕大小，页面的样式比例不变响应式和自适应怎么布局？在css3之前无从谈起响应式和自适应Css3怎么做到的呢？(... 查看详情
响应式网站应设置的视口（viewport）
代码：<metaname="viewport"content="width=device-width,initial-scale=1"> 解释：viewport（视口）是计算机或者设备屏幕上你浏览网页的内容宽度。width=device-width告诉浏览器以全尺寸渲染页面（不管屏幕尺寸可能是多少），如果没有在viewP... 查看详情
自适应和响应式区别以及写法
...，自动调节网页内容的大小，使其主体内容和布局不变。响应式：响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。(1)允许网页的宽度自动的调... 查看详情
响应式设计的现状与趋势
...12年开始到2014年，各大家对Web设计的趋势预测中，都提到响应式设计；2015年网页设计趋势预测中，响应式仍在继续。这个经历了几年依然大热的响应式，在过去的几年里，快速巩固了自己的地位，并掀起了一股网页设计新标准... 查看详情
pyqtpysideqpushbutton图标（icon）大小自适应设置
pyqtpysideQPushButton图标（icon）大小自适应设置img=QtGui.QImage(r‘d:/test.png‘)pixmap=QtGui.QPixmap(img)fitPixmap=pixmap.scaled(64,64,QtCore.Qt.IgnoreAspectRatio,QtCore.Qt.SmoothTransformation) #注意scaled()返回一个QtGui.QPixmapicon=QtGui.QIcon(fitPixmap)btn=QtWidgets... 查看详情
vue中echarts宽度自适应设置100%
参考技术A<chart :options="options" style="width:100%;height:400px" autoresize ></chart>添加autoresize属性 查看详情
zblog主题模板自适应手机响应式zblogphp简洁博客主题
Z-blogPHP版本简洁主题模板特点简洁舒适手机移动端自适应，完美有利于优化代码结构利于编辑对于不懂代码的，也非常适合简答后台简答PC端侧边栏下拉跟随，无论下面有多长，导航侧边栏都只在左边；方便你选择栏目SEO方面代... 查看详情
移动端rem自适应设置
对于移动端自适应各种终端的解决方案较多，本篇只是选择其中一种rem适配，我个人做移动端最喜欢的方案。rem就是以html根元素的字体大小为参考，比如html:font-size:20px;1rem=20px;2rem=40px.....，因为移动端的屏幕特殊之处，主要是不... 查看详情
响应式网页设计中的宽度与最大宽度
】响应式网页设计中的宽度与最大宽度【英文标题】：widthvsmax-widthinresponsivewebdesign【发布时间】：2013-01-2709:17:53【问题描述】：在有关响应式网页设计的教程中，建议对图像使用max-width:100%以使其灵活。为什么我们可以为此使用... 查看详情
织梦极简响应式个人自媒体文章资讯博客模板自适应手机端
介绍：织梦dedecms极简响应式个人自媒体文章资讯博客模板自适应手机端采用织梦内核开发的模板，这款模板使用范围广，不仅仅局限于一类型的企业，博客自媒体、文章博客类的网站都可以用该模板。你只需要把... 查看详情
响应式网页设计中的单个样式表与多个样式表
】响应式网页设计中的单个样式表与多个样式表【英文标题】：Singlevsmultiplestylesheetsinresponsivewebdesign【发布时间】：2012-01-2910:07:17【问题描述】：简而言之：在进行响应式网页设计时应该使用一个还是多个样式表？详细说明：在... 查看详情
html5/css3响应式页面开发总结
一，自适应和响应式的区别 自适应是一套模板适应所有终端，但每种设备上看到的版式是一样的，俗称宽度自适应。 响应式一套模板适应所有终端，但每种设备看到的版式可以是不一样的。虽... 查看详情