rem布局

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

一、选择合适的ide 　　根 据cube-ui官网，vue-cli >= 3时，直接执行vue add cube-ui 进行安装，安装过程中会询问特殊配置项： 　　1、Use post-compile 选择后编译 　　2、Import type 引入类型 按需引入 还是 全部引入，项目较小的情况下 建议全部引入，组件使用起来更方便 　　3、Custom theme 自定义主题 　　4、Use rem、vw layout 使用rem、vw布局 　　5、Use amfe-flexible 当使用 rem 布局的时候，可以选择使用 lib-flexible 2.x 来动态计算更新 rem 的值 　　选择完成后，cube-ui会自动添加配置项到项目中，我们直接使用就可以了 转载请标明出处: vue3.0学习笔记（二） 文章来源: vue3.0学习笔记（二）

1、npm i amfe-flexible 2、import 'amfe-flexible' 然后再，安装postcss-px2rem插件 npm i postcss-px2rem 在package.json中配置 "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { "remUnit": 26.7 } } } 来源： https://www.cnblogs.com/woaiqianduan/p/11762246.html

1.布局的总体结构框架： 2.注意事项： （a）：如果是左右两栏的布局方式，须在article的同级加一个aside； 因为是同级，所以必须设置同样的样式；而且他俩的父级，也就是section必须转化为弹性盒子，（因为元素在弹性盒子里面可以在一行排列）， 哪一个需要固定宽度就给他设置固定宽度，另外一个只需设置flex=1即可； 此外还需解决高度塌陷问题，将他们俩都设置 “overflow=auto //一定是auto//不能是hidden或者其他。” （b）： 常规一栏的布局，只需按部就班写出结构以上框架即可；（除去aside） 然后其css样式，所有移动端都一个模子，首先一定是 怪异盒模型 ， section{width：100%；height：100%；padding：上 0 下 0} article{width：100%；height：100%；overflow：auto } 所有在页面要呈现的东西全部写在article下面的div里面即可。 出现内容贴边现象，就只需在article里面加padding即可。 （c）： 底部 footer里面 icon图标文字字和常规文字搭配写法： 其实很简单只需将footer转换成弹性盒子，然后里面写几个图标就几个盒子，把icon字和常规文字写在每一个盒子里面， 接着将每一个盒子转换成弹性盒子， 主轴切换成竖行；“column”。 如此

https://note.youdao.com/ynoteshare1/index.html?id=ff02e616917fba868f39241c8383d7c7&type=note 目录 1：闭包 2：游览器渲染原理 3：原型链 4：this 5：数据类型 6：继承 7：数组方法 8：call、apply、bind 9：promise 10：深浅拷贝 11：函数节流 12：事件代理 13：let const var 14：ES6新特性 15：DOM事件流 16：CSS布局 17：rem、px、em单位 18：定位 19：rem适配 20：http协议 21：http缓存 22：从游览器到一个页面展示经历了什么？ 23：3次握手、4次挥手 24：Vue组件通信、Vue生命周期 25：Vue双向绑定原理 26：游览器缓存 27：本地存储 28：webpackage 29：冒泡 30：快排 31：数组去重 32：jsonp 33：跨域3中方式 34：post和get区别 35：同步任务、微任务、宏任务 来源： https://www.cnblogs.com/zyzmlc/p/11636748.html

前言的一些碎碎念：最近一直在写移动端的页面，不过一直是用的别人造好的轮子，很多时候并没有想那是为什么，那是怎么样要那么写，就跟着别人的文档去了。本以为自己对移动端的那一丢丢理解，结果很多东西都特么有问题，所以，今天停下了手中的一些东西，来谈下移动端的布局方案吧 一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值

一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。