响应式布局

一、开发原则 1、移动优先，在设计初期，就要考虑页面如何在多终端显示 2、渐进增强，充分发挥硬件设备的最大功能 二、如何实现相应布局方法 1、css3-Media Query，最简单 2、借助原生javascript，成本高 3、开源框架，可以更好的支持多终端 三、CSS3-media Query 常见属性： device-width,devic-height，根据屏幕宽高来做不同的展示 width,height，渲染窗口宽高 orientation，设备方向 resolution，设备分辨率 四、实际案例 css.css文件中写入 body{background-color:red;} 在head中引用css <link rel="stylesheet" type="text/css" href="css.css" media="only screen and (max-width:480px)" /> media="only screen and (max-width:480px)"表示，当浏览器显示窗口宽度小于480px的时候，就引用css.css文件 直接在head，style中编写 @media screen and (min-width:480px){ body{background-color:#ff00ff}} 来自为知笔记(Wiz) 来源： https://www

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 在学习Media Queries模块前，先通过一个响应式布局实例来了解一下响应式布局和Media Queries模块的简单应用。在本例中，使用HTML5的结构元素定义了5个盒子。当浏览器窗口尺寸不同时，页面会根据当前窗口的大小选择使用不同的样式。当窗口宽度在1000px以上时，页头和页脚分别在页面的最上方和最下方整行显示，中间主体分为三列显示；当窗口宽度在640px以上、1000px以下时，中间的第三列隐藏；而当窗口宽度在640px以下时，5个区块从上到下排列显示。代码如下所示： 在本例中，通过不同的屏幕分辨率访问可以获取不同的样式，在各自的样式中重新设置了每个区块的布局，不仅需要改变布局样式，在不同的屏幕分辨率下，字体、图片及背景图片同样需要重新设置样式，以适应当前屏幕下的内容展示。至于要判断多少种分辨率，完全取决于产品的需求。常见的分辨率种类有手机、平板电脑（注意这些终端是存在横屏、竖屏区别的）、桌面显示器，一般大于960px的显示器都可以采用默认样式而不必在媒体查询里判断。本例在不同屏幕分辨率下的展示效果如图1～图3所示。 图1 窗口宽度在1000px 图2 窗口宽度在640px以上、1000px以下时的页面显示 图3 窗口宽度在640px以下时的页面显示 在不同窗口大小的子样式区域中，可以继承全局的样式

Viewport:是用户网页的可视区域。 手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 设置 Viewport 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。 响应式网格视图 创建响应式网格视图 接下来我们来创建一个响应式网格视图。 首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box 。 确保边距和边框包含在元素的宽度和高度间。 添加如下代码： * { box-sizing: border-box; 来源： https://www

目录 移动web介绍和两种开发方式(响应式开发方式 原生的开发方式) 响应式的原理(CSS3的媒体查询) 响应式开发框架(Bootstrap) 的介绍和基本信息-优势-版本 了解框架和库的区别 主导者不一样 入门Bootstrap 起步 下载和引包 阅读Bootstrap的文档 了解常用的全局CSS样式 和 组件 和JS插件 搭建项目目录结构 创建主页引包 设置网页字体和空结构 字体图标的生成 和使用 总结 移动web前言 移动web ： 移动端手机浏览器或者微信里面浏览的 网页 移动APP ： 手机上需要下载安装的 应用程序 1. 移动web介绍 1.1 响应式开发 一套代码运行多个终端 优点:开发快 维护快 适配好 缺点加载速度慢 1.2 纯原生移动web开发 一套代码运行一个端 优点: 加载速度快 缺点开发慢 维护慢 适配差 1.3 应用场景 : 响应式开发用在一些新建的网站(PC和移动同时出来) 对加载速度要求不是很高 纯原生移动web开发 一般会用在一些已经有PC端上线的网站 再次开发移动端 移动端需要加载速度很快的网站 2. 响应式开发原理 2.1 CSS3的媒体查询： 通过查询屏幕的的宽度来指定某个宽度区间的网页布局 2.2 常见设备的屏幕宽度 超小屏幕（手机） 768px以下 小屏设备（平板） 768px-992px 中等屏幕（旧式电脑） 992px-1200px

自适应布局：多套 自适应布局是是为了解决如何才能在不同大小的设备上呈现同样的网页;它的缺点是当屏幕缩放过小时,虽然能显示但太过拥挤/不能够自动适应调整网页的布局! 响应式网站：一套 响应式布局就是为了解决它的缺点而来的, 可以根据屏幕的缩放,不仅可以自动适应,还能自动调整页面的布局,使页面更加的美观;它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动! 比如一行中显示6个图片,当调整宽度为之前的50%时,就会变成一行三个 响应式网站如何实现： 1.允许网页宽度自动调整 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 2.尽量少使用绝对宽度 　　rem:可以设置字体和元素大小; 相对于根元素来说 　　em:设置字体大小; 相对于父级元素　 　　百分比: 　　width:auto 3.图片视频自适应　 　　img, object { max-width: 100%;} 4.或者可以引入写好的库: 　　像移动端布局 flexble.js 5.一些UI框架自带的响应式方法: 　　像element-ui ，bootstrap,layui 来源： https://www.cnblogs.com/moppet

响应式布局 l 响应式布局是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简而言之，就是一个网站能够兼容 多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 l 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移 动设备的普及，越来越多的设计师采用这个技术。 l 一个典型的响应式布局网站： http://www.16ketang.com/ l 试着逐渐缩小该页面的窗口，看看网页有什么变化 l 由于响应式布局要针对不同的视口尺寸，对样式作出更多的修改，因此并不像流式布局那样让宽度 自动适应那么简单。 l 实现响应式布局最核心的技术就是使用媒体查询（ media selector ）。 l 媒体查询是 CSS3 引入的概念，是指针对不同的设备、不同的视口尺寸，使用不同的样式代码。 l 响应式布局的原理，正是大量的使用媒体查询，让页面中一些元素在不同的视口中具有不同的样式 表现。 l 常见的视口尺寸 l 虽然你现在知道了如何使用媒体查询，但我们真正关心的，是页面在手机、平板、上网本或小型笔 记本、 PC 端中具有更好的表现力。 l 但问题是手机型号众多，其他设备也是如此，它们的尺寸不尽相同，我们如何来判定当前的视口尺 寸属于什么设备呢？ l 好在经过大量的实践应用

下面为我平时学习所看的高质量文章的汇总，以便后面的查阅及总结 响应式布局之网站头部导航 移动端媒体查询的一些尺寸参考 js如何使用媒体查询 H5页面选IOS系统滑动卡动问题！ 深入研究-webkit-overflow-scrolling:touch及ios滚动 【前端性能】高性能滚动 scroll 及页面渲染优化 响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh） CSS 属性：touch-action 来源： https://www.cnblogs.com/XmanLin/p/12006279.html

1. 静态布局(Static) 静态布局是针对PC端的传统Web设计 设计一个居中布局，一般具有固定的宽度。当浏览器窗口缩小时，页面内容会被遮挡，呈现横竖向滚动条。 2. 响应式布局(Responsive) 针对越来越多的移动端设备，一个web设计能够兼容多个终端。 通过CSS3中的Media Query(媒介查询)，采用栅格化格式方式，分别为不同的屏幕分辨率定义布局。 3. 弹性布局(Flexbox) 为了实现响应式布局，CSS3提供了一种最新布局模式。 提供了更加高效的方式来对布局容器的子元素进行排列、对齐和分配空白空间。 来源： CSDN 作者： uuihoo 链接： https://blog.csdn.net/uuihoo/article/details/79676284

根据你的产品特点，进行两种不同的设计， 根据你的设计需求，选择合适的技术方案 。 A与B不是硬币的正反面，它们为了解决同一个问题而生，它们是同一种思想的延伸。 移动和桌面设计的差别远不止是布局问题。只要有足够的编程量，这些差别是可以通过响应式设计来解决的。事实上，你可以认为如果一种设计不能兼顾两种平台的主要差别，就不能算是合格的响应式设计。但是，如果确实想要处理好平台间的所有差异，我们就回到了原点：进行两种不同的设计。 ——《Mobile Usability》（《贴心设计 打造高可用性的移动产品》） 那么究竟响应式设计适合哪些场景？ 正如我们经常看到的那样，很多中小型企业，个人博客，创业公司，开源项目，小型网店，艺术家，画家，音乐家，甚至是政府和学校，都使用响应式技术，来搭建他们的网站。这些页面的特点一般都是访问者和网站的交互很少，仅仅用于信息展示和获取以及点个赞什么的。需要写的兼容性代码很少，非常适合做成响应式。 响应式设计不适合哪些场景呢？ 而像淘宝，京东，还有其他的重交互性系统，则不大那么适合使用响应式技术。《响应式 Web 设计》一书中提到，响应式设计应该以移动用户的体验优先。在进行功能性设计的时候，需要优先考虑移动端的用户体验，然后才能考虑计算机端的用户体验。毕竟计算机的屏幕，比手机要大很多。产品经理往往要考虑，如何物尽其用并且堆砌更多的功能

瀑布流式布局（简称瀑布流）最先在网站上应用 Pinterest ( 貌似是最早使用这种布局的网站了)， Mark之 ， 蘑菇街 ， 点点网等页面都采用了这种布局 。那么什么是瀑布流呢？瀑布流的好处在哪？ 瀑布流，又称瀑布流式布局、瀑布墙。是目前比较流行的一种网站页面布局方式，视觉表现为参差不齐的多栏布局，随着瀑布流效果页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。 瀑布流的布局原理： 这种布局是基于响应式布局的。他可以 根据浏览器宽度以及每列宽度计算出列表个数。来动态加载图片。且需要预加载几张图片，再当滚动条滚动的时候，对每一列的底部位置做检测，如果在屏幕中或屏幕上方，则立即append一个新图片。因为，滚动是连续的，所以，我们实际看到的效果是图片不断load出来。(如果加载的图片太多最好做好本地缓存)。让用户的体验效果更佳。 瀑布流的实现方法： 方法一： 当浏览器宽度改变的时候，页面上有个 id 为 waterFallDetect 空 span 标签，这个标签作用有两个：一是实现两端对齐效果，二是用来检测瀑布流布局是否需要刷新。 检测原理如下： 该 span