自适应

很多人会遇到这样的问题，当你在自己的电脑上精心制作好网页，却发现在别人的不同分辨率的电脑上浏览你的页面时，自己的网页排版乱得一塌糊涂，或者被拉伸，或者被压缩，要不就是不能完整显示在屏幕内。这是为什么呢？因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计，但是却没有考虑到网友们可能使用了别的屏幕分辨率。 目前，网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法，特别说明一下除非你的网站是艺术类的，有特别需求，通常我们都会首先照顾分辨率设置为800×600的大众化标准。 一、 自然拉伸 如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时，只要你把表格的宽度属性定义为100% ，表格就会根据分辨率的不同自行调整宽度。 二、 固定居中 在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得”不堪入目”。两种分辨率各做一个吧？做起来费劲。所以目前普遍采用的方法是固定居中法！ 现在大多数网民都还在用800*600的分辨率

viewport 语法介绍 <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] "/> width 控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height 和 width 相对应，指定高度。 initial-scale 初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。 maximum-scale 最大缩放

方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： · 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从 代码 也可以证实这一点：

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

WebApp与Native App有何区别呢？ Native App： 1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦。每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。 3、非常酷。因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果。 4、Native app是被Apple认可的。Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web app却不行。 Web App： 1、开发成本较低。使用web开发技术就可以轻松的完成web app的开发。 2、升级较简单。升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉。 3、维护比较轻松。和一般的web一样，维护比较简单，它其实就是一个站点。 Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP。 当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使 用

android：屏幕自适应 From： 4种必须知道的Android屏幕自适应解决方案（求投票支持） demo下载： http://www.eoeandroid.com/forum.php?mod=attachment&aid=NjE0Njh8ZTIyZDA2M2N8MTMzODgyOTQxN3w1NzAwOTV8MTczOTcz Demo首页的预览图 一、细说layout_weight 目前最为推荐的Android多屏幕自适应解决方案。 该属性的作用是决定控件在其父布局中的显示权重，一般用于线性布局中。其值越小，则对应的layout_width或layout_height的优先级就越高，一般横向布局中，决定的是layout_width的优先级；纵向布局中，决定的是layout_height的优先级。 传统的layout_weight使用方法是将当前控件的layout_width和layout_height都设置成fill_parent,这样就可以把控件的显示比例完全交给layout_weight；这样使用的话，就出现了layout_weight越小，显示比例越大的情况。不过对于2个控件还好，如果控件过多，且显示比例也不相同的时候，控制起来就比较麻烦了，毕竟反比不是那么好确定的。 于是就有了现在最为流行的 0px设值法。看似让人难以理解的layout_height=0px的写法

//设置页面字体 window.addEventListener('DOMContentLoaded', () => { const html = document.querySelector('html'); let size = window.innerWidth / 10; size = size > 75 ? 75 : size; html.style.fontSize = size + 'px'; }) //配置不同环境下是否启用debugger工具 // if(window.location.hostname != 'agent.ewszjk.m.jaeapp.com' || window.location.hostname != 'm.vue.agent.3seconds.net'){ if (process.env.NODE_ENV !== 'production' || true) { let el = document.createElement('div'); document.body.appendChild(el); eruda.init({ container: el, // tool: ['console', 'elements', 'network'], useShadowDom: true }); } 来源： https://www.cnblogs

一、”自适应网页设计”的概念 2010年，Ethan Marcotte提出了“自适应网页设计”（Responsive Web Design）--这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。 二、允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。 <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用 css 3-mediaqueries. js 。 <!–[if lt IE 9]> <script src=”http:// css 3-mediaqueries- js .googlecode.com/svn/trunk/ css 3-mediaqueries. js ”></script> <![endif]–> 三、不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局

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

　　“跑批”也叫“批量处理”、“批处理”，英文：Batch Processing，是现今各类IT系统中常见业务之一，根据统计，70%的业务系统中的操作，是通过跑批方式完成的。“跑批”简单来说，是将一类相同的业务“积攒”到一定的量（业务相同，成批量），在指定时间点启动进行自动处理，达到简化操作，提升效率的目的。分析批处理的过程，我们不难总结出批处理业务的特点：处理量大（成批），有特定的触发时机（指定时间点），可自动处理（无需人工干预）。 “跑批”的发展历程 　　跑批业务的特点特别适合使用计算机进行处理，因此从计算机出现的那一天开始，人们就开始使用计算机来处理跑批业务。处理跑批业务的计算机软件，被称为批量业务处理软件。批量业务处理软件伴随着跑批业务发展经历了多个阶段，从最初的一段小脚本发展到动态自适应的跑批处理平台，成为了现代IT系统中不可或缺的一部分，可谓波澜壮阔，精彩纷呈。下面我们来重温一下跑批软件的发展历程吧。 计算机 “跑批”的雏形，1952-1964。 　　计算机诞生伊始，尚没有现代计算机的输入和输出设备，只能通过在纸带上打孔的方式进行输入输出，一笔一笔地处理数据，需要不停地打孔，读孔，既费时又费力。为了提高效率，渐渐形成了将要处理的数据积攒成“批”，在指定时间一次性进行处理，极大地减少了频繁打孔读孔的操作，提高了效率。这种处理方法，被称为批处理