1.viewport viewport在移动页面中是相当重要的概念，引用两篇文章： 一篇真正教会你开发移动端页面的文章(一) 一篇真正教会你开发移动端页面的文章(二) 2.如何根据psd稿件，设计页面 在上面的后一篇文章有详细的说明，主要是设置 viewport 中的缩放比例，以及 HTML ...

移动端开发中，有一些基本概念需要理解清楚，才能更好的组织编程逻辑。在刚接触时，移动端视口的缩放和rem单位的缩放搞混淆了，弄得自己很蒙圈。所以仔细总结下自己的理解。 移动端的适配，我理解为两点： 第一点就是视口的缩放配置，牵扯出视口和像素等概念。目的是为让我们的CSS样式中逻辑像素匹配 ...

最近做了几个移动端的项目，因为第一次接触移动端的布局，所以踩了几个坑，今天总结一下，有不对的地方欢迎大家提意见。 移动端布局需要考虑为不同分辨率的设备都提供一个出色的使用体验，下面我来总结一下移动端布局的方法。 借助库 比如Bootstrap和MUI都可以实现自适应布局，借助于 ...

一、流式布局（百分比布局） 使用非固定像素来定义网页内容，也就是百分比布局，(特别适合于电商网站的布局)通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方式，就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备 ...

在之前有一种流行已久的移动端适配方案，那就是rem，我想下面这两句代码，有不少老移动端都不会陌生： 没错，在那个移动端UI稿尺寸为750*1334满天飞的时代，这两句代码确实给开发者带来了很大的方便，这样设置根font-size后，px和rem的转换比例成了100, 为比如UI稿 ...

是根据字体大小实现布局，总体来说不太适合; 第二种方案 viewport，postcss-px-to-view ...

通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别)，我们现在来总结一下如何实现一个最佳方案。 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配，如下图 但是这个可能不会太精准，比如我的设备布局viewport可能是370px ...

我们通常在写移动端页面时，往往都会在html页面中加入这样一段话 可能我们只知道这三个字段的含义（视口宽度等于设备宽度，屏幕缩放为1，禁止用户缩放），但是为什么要这么写，其原理又是什么呢？ 我们先看一个简单的demo吧。 该demo展示一个宽度为320px的div ...