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

一般我們做vue移動端項目使用的長度單位是rem、em，需要根據設計稿寬度進行計算，而這個插件可以配置相應屬性直接按照原始設計稿長度進行構建，不需要繁瑣的單位換算。 安裝： npm install postcss-px-to-viewport --save 安裝完成后在vue ...

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

對於移動端自適應各種終端的解決方案較多，本篇只是選擇其中一種rem適配，我個人做移動端最喜歡的方案。 rem就是以html根元素的字體大小為參考，比如html:font-size:20px;1rem=20px;2rem=40px.....，因為移動端的屏幕特殊之處，主要是不同類型手機像素比dpr ...

問題的，今天給大家推出另外一種自適應不同移動端的方法，使用vw，vh單位。vw和vh單位的大小是多少？ ...

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

問題：當前市場上手機屏幕寬度不盡相同，常見有320px（ipone5）、375px（ipone678）等等，而為了在不同寬度的手機屏幕上良好現顯示網頁，我們需要解決方案。 原理：當前前端解決手機屏幕自適應的手段極多，究其原理，主要分為兩大版塊： 　　一、使用百分比長度單位，當前百分比長度單位 ...

//設置根元素字體 var win = window, doc = document; function setFontSize() { 　　var winWidth = $(window).width(); 　　//750這個數字是根據你的設計圖的實際大小來的，所以值具體根據設計圖的大小 ...