1. 视口 viewport viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏…

在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，dpr等等等等，我只介绍这样一种非常不错的移动端适配方案：post-css-to-viewport，如果我说这种方案能解决98%以上的移动端布局痛点，我想整个掘金，应该没有人会反驳。 这种…

浏览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。 概览 绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: …

可以理解成生活中的绘画，而对于开发者而言，代码就是画笔，内容就是你开发过程中所画页面的最宽和最高的那个矩形，比如清明上河图就属于内容宽度很长的一幅画。 布局视口可以理解成画板，也就是说纸张只有这么大，如果你想在A4纸上画等比例清明上河图，那显然是会溢出去的。 标签，在显示上也能…

clientWidth、clientHeight、offsetWidth、offsetHeight、window.getComputedStyle、getBoundingClientRect

以上步骤全部完成之后，重启服务，已经宽高都已能够实现自适应。但是发现两边出现了滚动条： 注意事项：代码中的px是以flexible.js自动计算成rem的，其中有一个隐藏的问题，就是只能自动转换内嵌的style样式。不能计算行内样式中的px。 总结：如果要去除隐疾，全部都要使用…

从古老的的百分比布局+px+媒体查询到rem布局，一直没找到心仪的移动端适配方案。网上搜索的教程质量也是参差不齐(要么配置过于繁琐，要么一篇文章到处抄袭)，反正我看完了总有一种无从下手的无奈。所幸，经同事推荐找到一款完美的插件。欣喜之余，以作记录。同时希望能给需要的朋友提供帮助…

CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小!遗憾的是，事实并非如此。100vh在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免1…

为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解。因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 很明显图一要…