H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

使用viewport标签

在HTML文档头部添加viewport标签，设置meta属性值为“width=device-width”，可以让浏览器根据设备屏幕的宽度自动调整页面的缩放比例，从而实现页面自适应。

编辑导语：如何使用Axure去获取页面尺寸，并且使内联框架自适应大小呢？本文作者通过实际操作，进行了记录总结，希望看后对你有所帮助。

今天要演示的东西其实很简单，一两分钟就能做完，主要是用来弥补Axure IDE提供的交互功能中的不足，导致一些想法没办法很好地实现。

其实国外有大神(De Jongh)做了一个能在Axure发布框架内跑起来的Javascript拓展，这是地址：http://dejongh.dk/wiki/doku.php?id=interaction:axure_api&do=index。

Wowoy：https://juejin.im/post/5de72b1f51882512360d3910

开启一个移动端项目的基础，首先是想好如何在代码中实现移动端适配。之前没有经验，第一个项目里简单粗暴地采用px写死的方法，觉得不好，本项目采用的是像一位优秀同事习得的rem布局方法，它可以自适应不同屏幕尺寸的设备，简单好用。

这里我们要用到两种单位:

1.vw

目前，昆明网站建设公司用自适应技术帮助客户制作网站已成为一种规范标准，为何自适应网站设计成为企业建站的首选，因为自适应网页设计方式会自动检测屏幕大小以载入合适的布局，当你在电脑或手机浏览网页，网站会自动地检测和选择蕞佳的屏幕布局。

自适应网页如何实现

pure是一个轻量级框架。这类框架的作用就是通过给相应元素添加预设好的class，来快速的实现预设效果。

pure只有短短数千行代码，但是可控拓展，非常实用，对于新手来说，pure是css框架入门的一个比较好的选择。在后期做项目时也可能用到类似于boostrap这样的大型框架。所以前期对于轻量级框架源码的理解是很有帮助的。

css 制作自适应的正方形，padding的妙用。

绘制一个相对于父自适应的正方形，很多人，可能会想到使用aspect-ratio，其实使用padding同样能做到。

padding属性的百分比值是相对于父元素的宽度计算的，使用这个特性，就很容易做一个 相对于父容器的正方形了。

/*===========*/

介绍

Pure.css是一组小型的自适应CSS模块，可以在每个Web项目中使用。Pure以Normalize.css为基础，并提供native HTML元素以及最常见的UI组件的布局和样式，考虑到移动设备，Pure具有开箱即用的响应能力，因此元素在所有屏幕尺寸上都看起来不错。

<link rel="stylesheet" href="./pure-min.css"  />

1、安装插件

npm install postcss-px2rem  --save

2、引入postcss.config.js文件

需求来源

在文本框输入过多内容时，会出现滚动条，不美观也不舒适；又或者当文本框填充很多内容时，在删除部分内容，高度不会变化，看着好不雅观。这时候，就需要做一个会自适应高度的文本框，根据内容来变化文本框高度。

html源码

给每个textarea文本框加一个autoHeight属性，并设置其属性为true，以便于初始js时获取需要自适应高度的标签

背景：

在使用layui table展示列表数据的时候，有时候单元格的内容有多行，这个时候需要设置单元格的高度自适应，这种情况下，如果有设置表格的某些列固定（fixed）的话，会造成固定列的样式错乱，排序的时候样式也会错乱，需要做特殊处理。