自适应 | 易学教程

响应式布局和自适应布局详解

阅读更多关于响应式布局和自适应布局详解

响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中，你也会因此更好的掌握一些基础知识。当然，要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的，但是你至少可以很轻松的确定它是能够正常工作的，因为页面的基本特性和布局结构都是根据语义结构来部署的。响应式布局概念 Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。经过不停地学习和实践，如今总结响应式设计的方法和注意点。其实很简单。响应式设计的步骤 1. 设置 Meta 标签大多数移动浏览器将 HTML 页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在 <head> 标签里加入这个meta标签。 · <meta name="viewport" content="width

相对元素或者内容自适应

阅读更多关于相对元素或者内容自适应

如何实现元素高度自适应？先思考这两个问题： a、如果想实现元素高度自适应，高度能不能设置成固定的值？ b、如果高度不能固定，那该怎么设置呢？第一种情况： 1）非浮动元素的父元素高度自适应实现方法： 1、不设置高度，或者高度设置成： height:auto； 2、通过最小高度实现高度自适应： min-height:300px;_height:300px; 注：;_height:300px; 只有IE6 这个浏览器识别当前的属性，其他浏览器就都不识别了。不设置height值时，浏览器默认height:auto; 第二种情况： 2）浮动元素的父元素高度自适应说明：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度塌陷；怎么去解决？（只要解决高度塌陷的问题，父元素就能实现高度自适应了）父元素内有两个浮动元，默认情况下，显示效果如图所示。实现方法： 1、给父元素一个固定高度去解决高度塌陷问题弊端：不能让元素高度自适应了。 2、overflow：hidden; 解决高度塌陷并能实现高度自适应的方法一；（遵循BFC的显示原则）弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏。 3、在浮动元素的下方添加一个空元素，并且给他设置一下属性：空标记： clear:both;height:0;overflow:hidden; 弊端：会添加很多空标记，增加结构负担

宽高自适应

阅读更多关于宽高自适应

什么是宽高自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整元素宽高自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。相对窗口和父元素的自适应写法宽度：当块状元素不写宽度的时候，默认的宽度就是100%；是父元素的宽度的100%； width：100%；优点：宽度自适应可以让下面这种篇幅很大的图片很好的呈现在可视窗口内，因为宽度没有写出固定的数值在很大的程度上增加了代码的容错率。在初学者中最容易让人崩溃的一种情况就是原本分好的区域，因为一两个像素的差距导致折行，极度的破坏了画面的完整性，并且这个错误的本身非常细小不易察觉，宽度自适应放出了多余的空间给这两个像素添加了容身之所不仅完美的呈现画面同时，还保住因为查找错误而丢失的浓密秀发书写方式：标题高度： html,body{height:100%;} 当让元素的高度相对浏览器窗口显示半分比的值得时候，一定要给HTML 和body设置高度100%；优点：所有的元素例如图片，文字，基础代码，都有着自己的本身默认的高度数值。例如下图内容区分为了左右两块，左右两块的高度所占区域差别非常大，右边内容区的文字居多并且分出了很多的段落而且每一块段落的高度数值都不同，通常为了更高度的还原设计稿

CSSBFC规则的应用自适应两栏布局

阅读更多关于 CSSBFC规则的应用自适应两栏布局

两栏布局是写页面时经常用到的，要想实现两栏布局，就需要明白BFC规则，Block formatting context，直译为“块级格式化上下文”，可以简单的理解它为一个独立的区域，把区域内部元素与外部元素区分开，两者互不干扰。它的规则： 1.内部元素会在垂直方向一个接一个放置。 2.属于同一个BFC的两个元素上下margin会重叠。 3.独立的BFC的区域不会与浮动元素重叠。 4.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 5.计算BFC的高度时，浮动元素也参与计算 BFC规则无处不在，根元素html就是一个大的BFC区域，日常练习中遇到的margin上下重叠的bug就是这个原因，另外元素有以下属性之一也可以触发BFC： 1.float属性不为none 2.position为absolute或fixed 3.display为inline-block, table-cell, table-caption, flex, inline-flex 4.overflow不为visible 一、两栏布局。这里记录的方法是通过浮动实现两栏布局，当我们分别给左右两个元素设置左右浮动的时候，两者脱离了文档流，父元素box就会因为没有高度而高度塌陷。这时候就可以把box设置成一个BFC区域，让它内部的浮动元素参与到高度的计算中。代码： <!DOCTYPE

finereport普通报表的移动端自适应方案

阅读更多关于 finereport普通报表的移动端自适应方案

移动端报表呈现，首先要求的是页面随手机屏幕大小自动放缩（自适应），下面给出一个普通报表中的 finereport 移动端自适应方案，适用于 finereport 7.1 之前的版本。首先，了解一下当前我们可以做到的自适应效果：当前，用 FIneReport 按某一尺寸做好的报表，如果在屏幕像素较大的手机上打开，我们可以做到自动放大，但是我们当前最多只能放大两倍。所以，在制作移动端报表时，尺寸要有所取舍了。之前给一个客户做过移动端报表，实现了在 iphone4 、小米、华为 P6 、三星 S4 等手机上自适应的效果（这里说的自适应主要是宽度上的或者说是横向上的自适应），具体做法如下：设置页面大小，将页面宽度设置成 120 ，页边距设置成 0 。报表设计界面有红色的页边距线，考虑到精度问题，可以是先把单元格宽度设置小一点。注：在制作过程中还发现一个问题，移动端打开报表后，并非一定是横向自适应，当当前报表纵向高度小于横向宽度时，会变成纵向自适应。这里说的高度和宽度并非是指页面纸张的宽度和高度，而是指有数据的单元格所占区域的高度和宽度。来源： oschina 链接： https://my.oschina.net/u/2365939/blog/485508

520，自适应布局的思路（待补充）

阅读更多关于 520，自适应布局的思路（待补充）

左侧浮动或者绝对定位，右侧通过margin撑开使用flex 使用<div>包含，然后靠margin形成bfc（百科： block formatting context块级格式化上下文 bfc是一个独立的渲染区域，只有block-level box参与，他规定了包括内部的block-level box如何布局，并且与这个区域外部毫不相干。 bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此，包括浮动和外边距合并等等，有了这些特性我们布局的时候就不会出现意外了情况了。哪些情况下会产生bfc display属性为block，list-item，table的元素，会产生bfc。（最常用的就是块级元素）什么情况下会触发bfc 设置了float属性，并且不为none position属性为absolute或者fixed display为inline-block，table-cell，table-caption，flex，inline-flex overflow属性不为visible ）来源： https://www.cnblogs.com/1998Archer/p/12373508.html

css 自适应视口单位

阅读更多关于 css 自适应视口单位

视口单位(Viewport units) 什么是视口？在PC端，视口指的是在PC端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。根据CSS3规范，视口单位主要包括以下4个： 1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 3.vmin：选取vw和vh中最小的那个。 4.vmax：选取vw和vh中最大的那个。 vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。 vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。 vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。来源： CSDN 作者：神奇大叔链接： https://blog

移动端vue完美自适应适配方案之 webpack 配置 px自动转rem，以及根据视口改变rem（附上GitHub地址）

阅读更多关于移动端vue完美自适应适配方案之 webpack 配置 px自动转rem，以及根据视口改变rem（附上GitHub地址）

webpack 移动端自适应方案px自动转rem 3步走配置完成后在项目中直接根据设计稿的px大小来敲代码即可在开发环境中安装插件： npm install --save-dev postcss-px2rem npm install --save-dev px2rem-loader 2.根据视口改变html的rem属性，在static目录下创建flex.js存放已压缩过的（待补充GitHub地址） (function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) { var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if (match) { scale

自适应布局

阅读更多关于自适应布局

　　之前在几个CSS布局问题中，举了上下固定，中间自适应布局的例子，当时的例子父级元素的宽高都给定了，其实并不是个好例子，既然要自适应，父级元素就应该跟着页面大小变化，从而中间子元素也自适应。3种方法，其实是2种，因为是针对body，所以用fixed可以直接替换absolute来用。注意同时给html和body的height100%，只给一个不行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> # { margin: 0; padding: 0; } html { height: 100%; } body { width: 100%; height: 100%; margin: 0; font-size: 60px; } .class1 { height: 200px; width: 100%; background: #ccc; position: absolute; /*position: fixed;*/ top: 0; } .class2 { width: 100%; background: #888; position: absolute; top: 200px; bottom:

js图片自适应大小

阅读更多关于 js图片自适应大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>最新javascript自动按比例显示图片，按比例压缩图片显示</title> <script type="text/javascript"> function AutoResizeImage(maxWidth,maxHeight,objImg){ var img = new Image (); img. src = objImg. src ; var hRatio; var wRatio; var Ratio = 1; var w = img. width ; var h = img. height ; wRatio = maxWidth / w; hRatio = maxHeight / h; if (maxWidth ==0 && maxHeight==0){ Ratio = 1;

订阅自适应