根據設計稿的響應式開發的簡單實現

我是通過rem布局來實現的，比如設計稿的寬度為1440px

html {font-size: calc(100vw/1440);}

通過calc計算出font-size的值，這時1rem就相當于設計稿的1px，那還原設計稿就簡單了很多

當然如果是手機端，那還是要通過多媒體查詢，再設置html中的font-size,一般手機端的設計稿都為750px

@media screen and(max-width:768px) {html {font-size: calc(100vw/750);} }

不過這樣也會有些問題，不同設備最小font-size限制不一樣，規避最小font-size限制最好就是乘以100，這時設計稿的寬度就要相應的除以100，如

html {font-size: calc(100vw/1440*100);} 例如：設計稿的一個div寬度大小為300px,那么你就設置 div {width: 3rem; }

簡單介紹一下相關知識：

CSS中calc()語法:用于動態計算長度值，可以用在任何長度,數值,時間,角度,頻率等處 vw:把屏幕寬度分為100份，1vw等于屏幕寬的1% 多媒體查詢：使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面 @media screen and (max-width: {{最大寬度}}){ // CSS樣式 }

總結

以上是生活随笔為你收集整理的根据设计稿的响应式开发的简单实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。