最近一個項目做的是微信端，因為之前沒接觸過一直以為移動端的自適應都是用某個插件，然后里面是分開各種比例的最大多少最少多少，然后里面封裝了各種的<p>值多大等等。 　　不過結果卻出乎所料的簡單。下面將以一個寬為640px的手機分辨率為例，分步解釋從一個普通web到移動端的轉變（此處 ...

...

一、第一種方式是比較簡單的，開發速度也比較快。主要利用-webkit-transform:scale()這個屬性，比較設計稿和當前屏幕的寬度，或者高度，亦或者取兩者的最小值，來進行自適應。 1. 如果寬度自適應，如果兼容iphoneX的話，此時的設計稿的背景圖需要延長至1448，內容放在1206 ...

一、寬度自適應 三列布局左右固定、中間不固定或者兩列布局，左邊固定右邊不固定 原文鏈接：http://www.cnblogs.com/2050/archive/2012/07/30/2614852.html 看下代碼結構： 效果為： 中間列要不要設置margin-left ...

安裝 lib-flexible 1、npm i lib-flexible 2、在項目入口文件 main.js 里 引入 lib-flexible import ‘lib-flexib ...

當我們對移動端進行頁面適配時，我們首先應該了解到meta viewport，media query，以及動態rem。 什么是Viewport? 手機瀏覽器會把頁面放入到一個虛擬的“視口”（viewpoint）中，但viewport又不局限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區 ...

原文地址：移動端自適應布局方案嘗試 問題 剛開始接觸移動端H5頁面的時候最困擾的幾個問題是： 6或6p上明明是1px的邊框怎么就成了2px或3px辣么粗！ 圖片，div等如何等比自適應設計圖 后來慢慢知道了第一點是由於retina屏幕下設備像素比的問題造成，第二點知道了單位 ...

1、通過動態設置 viewport的 width 和 initial-scale 2、通過動態設置跟元素Html的font-size 即 rem解決方案 1. 使用meta： ...