根據(jù)設(shè)計(jì)稿的響應(yīng)式開(kāi)發(fā)的簡(jiǎn)單實(shí)現(xiàn)

我是通過(guò)rem布局來(lái)實(shí)現(xiàn)的，比如設(shè)計(jì)稿的寬度為1440px

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

通過(guò)calc計(jì)算出font-size的值，這時(shí)1rem就相當(dāng)于設(shè)計(jì)稿的1px，那還原設(shè)計(jì)稿就簡(jiǎn)單了很多

當(dāng)然如果是手機(jī)端，那還是要通過(guò)多媒體查詢，再設(shè)置html中的font-size,一般手機(jī)端的設(shè)計(jì)稿都為750px

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

不過(guò)這樣也會(huì)有些問(wèn)題，不同設(shè)備最小font-size限制不一樣，規(guī)避最小font-size限制最好就是乘以100，這時(shí)設(shè)計(jì)稿的寬度就要相應(yīng)的除以100，如

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

簡(jiǎn)單介紹一下相關(guān)知識(shí)：

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。