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 ...