移动端适配我们需要做哪些事情?一个最佳实践除了设置viewport和rem基准值，随着iPhone手机的不断升级，我们不得不正视以下2个问题：安全区域适配识别刘海屏关于viewpoint-fit在切入

流式布局是一套典型的弹性布局，它的关键特点是：页面中的关键（布局）元素的宽高和位置都不会变化，只有容器元素在做拉伸变化，简单来说就是宽度的拉伸，快级盒子默认就能适应容器的宽度。这种布局对于页面简单的web app是足够了，比如拉钩的页面： 中间每条招聘信息不管分辨率怎么变，招聘…

我最开始接触到的是经理让我把一个PC官网写到它的自适应，即写到是屏幕自适应到宽320的尺寸。我当时用到的是@media screen。 优点 : 无需插件,能够适应各种窗口大小，只需在CSS中添加@media screen属性。 紧接着我开始接触移动端的适配。 这个方法是CSD…

设备像素又称物理像素（physical pixel），是显示器中最小的物理单元，设备能控制显示的最小单位。 每个像素根据操作系统的指示设置自己的颜色和亮度。 任何设备的物理像素数量都是固定的。 由程序使用并控制的虚拟像素，比如web编程中的CSS像素(px)、安卓（dp）、io…

随着携带设备的越来越普及，移动端项目会越来越多的接触。所以想给大家介绍一下移动端适配那点事。 这是 iPhone4 的屏幕像素排列图，每个像素都是由三原色组成的单元。 1080*1920就是横向1080 纵向1920个物理像素点。 随着手机发展 从 720p 1080p 到现在…

近段时间，在开发移动端项目的时候，产品提了一个“自定义页面”的需求，刚开始在DevTools上做得顺风顺水，一马平川，直到在提交到测试环境用不同的真机访问页面时，却发现了一个很严重的问题：安卓的高倍屏展示自定义页面组件间距的时候会比iPhone要大很多（组件间距由js代码控制s…

随着Web技术的革新，移动端适配方案也在不断的变化，网上有很多关于移动端适配的文章，说什么rem布局已经过时，vw适配才是最好的适配方案。有这种理解的同学是错误的，任何适配方案都有它的优缺点，要结合自己的使用场景来进行选择。 文章先讲一下几种常见的适配方案，然后再看看几个大厂（…

本文为平时开发过程中在iOS（Safari）上遇到兼容性问题的总结和记录。 但只用这个方法在ios10以后就不行了，webkit官方认为现在的网页似乎都喜欢设置user-scalable=no 使用户无法缩放页面，这会使一些页面因无法正常缩放而无法看清字体，比如一些为pc设计的…

很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生 相信我们所有前端开发者，都是见证了手…