响应式布局

很多人经常会对响应式布局和自适应式布局产生混淆，今天将为大家介绍这两者到底表示的是什么以及它们之间的区别。具有一定的参考作用，希望对大家有所帮助。 一：什么是响应式布局和自适应式布局 1.什么是响应式布局 响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。 2.什么是自适应式布局： 自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。 二：响应式布局与自适应布局的区别是什么 1.自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。 2.自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。 3.自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。 4.自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。 总之，响应式布局还是要比自适应布局要好一点

玩前端也有几个月了，发现大家普遍混淆了响应式和自适应的概念。先给大家体验一下响应式和自适应的区别，请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适应和响应式的文章，摘抄并修改了一下，请大家欣赏： 起初，网页设计者都会设计固定宽度的页面，最开始的电脑显示器分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800 ||850|| 870|| 880。比如 开源中国 的网页就是固定宽度为998来定制的。至于为什么是 998 ，请 @红薯 后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题。于是出现了一种新的布局方式宽度自适应布局。我们平时谈论的自适应布局，大多指的就是宽度自适应布局。 在这种布局下，出现了两派： 百分比宽度布局 流式布局 题主说的是第一派，宽度使用百分比，文字使用 em，现在也很多开始使用rem了，也就是所谓的高清方案。第二派的布局以 iGoogle 为代表（已经停止）。 一 开始没有响应式布局这个词语，但是慢慢出现了一个词——渐进增强，新词的出现总是伴随的旧词一起出现。就好比 3G 出现之前，没人管自己的手机叫 2G，所以，3G 和 2G 两个词是一起出现的（技术上当然2G技术先出现）。同理，渐进增强出现后，另一个词「优雅降级

原文地址： http://www.333cn.com/shejizixun/201839/43495_145847.html 写在前面 近年来，随着科学技术的发展，终端的分辨率越来越多，响应式的设计氤氲而生。然而，作为设计师，你是否遇到过这样的情况：当你设计响应式网站的时候，由于不了解其规范及实现原理，而根据自己的理解设计出了一套设计稿。然而，当这份设计稿放到开发面前时，却发现很多你考虑得很美好的设计方案难以被开发，最终无法还原设计稿的效果。 本文围绕响应式的设计方法来写，重点简述流式网格、元素切换、响应式样式。看完本文，有助于你设计出兼容性更强，对开发友好的响应式设计。对缩短项目的开发周期，降低项目的开发、维护成本，推动项目落地有一定的帮助。 首先，我们先来了解几个概念。这几个概念有涉及到设计，也有涉及到开发。当然，我们的目的不是学习开发技术，而是通过对这些概念的了解，更好的掌握响应式设计的方法。 1. 响应式布局 响应式布局是Ethan Marcotte在2010年提出的概念。他认为，一个网站能够兼容多个终端 (指不同分辨率，不同Dpi的显示设备) ，而不是为每一个终端做一个特定的版本 ，这样的网站布局方式即称为响应式布局。 由于科技的迅速发展，终端设备的分辨率越来越多样化，响应式布局正是为此而生，其目的是确保一个页面在所有终端上都能呈现出令人满意的效果。

一、前言 根据前面写的 你不知道的CSS单位，进行了一种响应式布局的思考。 视口布局的优点：宽度和高度全部自动适应！再加上rem布局的字体适应，可以完美解决各种屏幕适配问题！ 二、正文 1、vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（解决宽高自动适配） <meta name="viewport" content="width=device-width,initial-scale=1.0"> 2、rem布局-解决字体适配（此布局在weex中无法识别） rem布局原理：根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。 @media only screen and (max-width: 1600px) and (min-width: 1280px){ html{ font-size: 14px; } } @media only screen and (max-width: 1280px) and (min-width: 960px){ html{ font-size: 12px; } } @media only screen and (max-width: 960px){ html{ font-size: 10px; } } 3、vw、vh、rem的使用 <template> <div class="box"> </div> <

重要内容处设置断点breakpoint CSS * { margin: 0; box-sizing: border-box; border: 0; padding: 0; font-weight: bold; } body { text-align: center; } .container { margin-top: 15px; width: 960px; margin: 0 auto; } header, nav, footer { height: 100px; background: #eee; margin-bottom: 20px; line-height: 100px; } section, aside { height: 300px; background: #eee; line-height: 20px; margin-bottom: 20px; } section { float: left; width: 500px; margin-right: 20px; background: #eee; } h3 { margin-top: 60px; margin-bottom: 30px; } p { font-weight: normal; text-align: left; margin: 0 20px; } aside { float: left; width:

Bootstrap响应式前端框架笔记一——强大的栅格布局 一、Bootstrap？ Bootstrap是一款HTML，Css和JavaScript开发框架，其也支持开发者进行自定义构建，开发者也可以只打包自己需要的功能模块使用。Bootstrap的中文网址如下： http://v3.bootcss.com/ 。 Bootstrap是一款响应式的编程框架，所谓响应式，是指在不同屏幕尺寸的设备上，使用Bootstrap开发的项目可以自动进行布局调整适配。其响应式布局的核心是栅格系统，栅格系统将浏览器分隔成一定数量的行和列。默认栅格系统将浏览器窗口分为12列，开发者可以为元素设置其在对应设备尺寸中所占的列数。 二、均分与尺寸适配 Bootstrap将浏览器尺寸分为4个等级，分别为xs，sm，md和lg。xs是指浏览器宽度小于768时的状态，一般对应移动手机设备，sm指浏览器宽度大于768且小于992时的状态，其一般对应平板设备，md指浏览器宽度大于768且小于1200时的状态，一般对应正常的个人电脑，lg是指浏览器宽度大于1200时的状态。如下表所示： 在开发者使用栅格类对标签进行定义的时候，需要注意，如果只设置了高等级的栅格类，则在此等级以下的浏览器尺寸都将采用竖直堆叠，此等级及以上等级的浏览器尺寸中都将水平排列。例如，如果配置了两个标签的类都为为col-md-6

一、静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： 　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。 　 在移动端开发中采用静态布局的两种方式：(来自：流布局与响应式网页设计有什么区别？) 　（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app 变革之rem） 　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。（具体见content"width=640,user

用CSS实现响应式布局 响应式布局感觉很高大上，很难，但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询，下面就介绍一下怎么运用： 使用@media 的三种方法 1.直接在CSS文件中使用： @media 类型 and (条件1) and (条件二){ css样式 } @media screen and (max-width:1024px) { body{ background-color: red; } } 2.使用@import导入 @import url("css/moxie.css") all and (max-width:980px); 3.也是最常用的方法--直接使用link连接，media属性用于设置查询方法 <link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/> 下面是一个简单的响应式的布局HTMl代码： <!doctype html> <html> <head> <meta charset="utf-8"/> <title>响应式</title> <link rel="stylesheet" type="text/css" href="index.css"/> <link rel="stylesheet" type

一、首先，在<head>标签下，设置<meta>标签 1 <!--设置meta标签,可以强制打开ie的edge模式--> 2 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"> 3 <!--响应式自适应> 4 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> 二、宽度最好不要用绝对 最好用这种：width:auto/ width:XX% 三、字体大小不要用px，用rem 来源： https://www.cnblogs.com/lwyKunKun/p/11850437.html

是否还在为你的应用程序适配PC端，移动端，平板而苦苦思索呢，是否在寻找如何一套代码适配多终端方式呢，是否希望快速上手实现你的跨终端应用程序呢，是的话，那就看过来吧，本文阐述响应式UI设计相关理论基础，包括：屏幕尺寸，物理，设备独立，CSS像素，dpr，视口等相关概念，还有响应式设计基础，常见设计模式，及响应式UI实现基本思路，希望能加深对响应式的理解和实践思路。 欢迎访问我的个人博客 响应式（Responsive） 响应式是什么呢？顾名思义，响应式，肯定会自动响应，响应什么？应用程序是在终端屏幕窗口中展示给用户，被用户访问的，那么就是响应屏幕的变化，不同终端屏幕尺寸大小不一致，需要针对不同尺寸屏幕进行不同的展示响应。 响应式（Responsive web design, RWD） ，是指一套应用程序用户界面（User Interface）能自动响应不同设备窗口或屏幕尺寸（screen size）并且内容，布局渲染表现良好。 自适应（Adaptive） 在响应式设计（RWD）之外，还有一种适配多设备屏幕的方式， 自适应设计（Adaptive web design， AWD） 。 自适应设计(AWD)，是指一个应用程序使用多版本用户界面，针对不同设备屏幕，服务器端返回不同版本用户界面，供用户访问。 自适应vs响应式 自适应和响应式设计的不同主要概括如下： 自适应是多套用户界面