整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
面對(duì)豐富尺寸的移動(dòng)端時(shí)，Iphone、安卓各種屏幕分辨率，智能手機(jī)品牌、機(jī)型如此眾多的今天，各種不規(guī)則的分辨率，即使作為專業(yè)團(tuán)隊(duì)的我們切版網(wǎng)，也很難尋找到所有的真機(jī)一一去測(cè)試。
無(wú)論我怎么去調(diào)試，都會(huì)有比例上的不一樣的問(wèn)題。這就會(huì)導(dǎo)致不能很好的還原設(shè)計(jì)。
解決辦法當(dāng)然是有的，那就是使用REM！
首先讓我們帶您一起理解一下rem
rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
在iphone6上，我們?cè)O(shè)置了20px=1rem，但是在iphone4上，同樣的1rem，就不應(yīng)該是20px，而是應(yīng)該大約17px（為（320/375）*20）,這樣才可以保證對(duì)應(yīng)的1rem和原來(lái)的效果相似，否則，在iphone4就變得很大了。所以，在iphone4上我們要修改html的font-size=17px，可是還有Iphone5，iphone6 plus,還有無(wú)數(shù)的安卓機(jī)型呢？！
下面給大家詳細(xì)介紹一下這兩種方法：
第一種是使用媒體查詢控制不同分辨率下的根原素大小。方法如下圖，要根據(jù)項(xiàng)目的實(shí)際類型改變媒體查詢的值。
第二種方法就是通過(guò)JavaScript動(dòng)態(tài)獲取屏幕的寬度，然后給HTML設(shè)置font-size的值。下面我給大家講解一下這段JS代碼。我主要以手機(jī)端為例。
將這做代碼打包到一個(gè)defineRemSize.js的文件中，在頁(yè)面里引用。在用下面這這個(gè)方法調(diào)用。
做完了這這些，我們有了可以自適應(yīng)的rem的值，接下來(lái)我就說(shuō)一下在實(shí)際使用中的一些心得。
Rem不僅可以用在字體大小單，包括容器寬度的值、高度的值、margin的值、padding的值都可以使用rem做為單位大小。實(shí)際上rem更像是聰明的百分比數(shù)值。如果頁(yè)面所有遠(yuǎn)素的值都使用rem，整個(gè)面更像是一張圖片。縮小時(shí)整體都會(huì)縮小，放大里整體都會(huì)放大。下面我給大家看一下我使用兩種方法做的同一個(gè)頁(yè)面的效果圖。
能過(guò)對(duì)比，會(huì)發(fā)現(xiàn)，使用rem在不同分辨率的設(shè)備上整體比例是不變的。并且沒(méi)有使用任何媒體查詢方法。但是使用px+%這種方法做出來(lái)的頁(yè)面，在不同的頁(yè)面上的元素的間距會(huì)發(fā)生改變，圖片會(huì)隨首設(shè)備寬度的變化而變化，但是文字大小以及元素的間距并沒(méi)有發(fā)生變化。
由以上可以得出，在使用rem做為頁(yè)面元素單位時(shí)，在適配時(shí)會(huì)更加簡(jiǎn)便，并且頁(yè)面在不同尺寸的終端設(shè)備上頁(yè)面整體比例不會(huì)改變。不需要我們?cè)偻ㄟ^(guò)Media query 來(lái)適配不同的分辨率。并且做出來(lái)的頁(yè)面會(huì)更加的接近設(shè)計(jì)圖。
h5、響應(yīng)式切圖，找切版網(wǎng)（ www.qieban.cn ），是國(guó)內(nèi)較早專注網(wǎng)頁(yè)切圖服務(wù)的團(tuán)體，由人均3年的前端開(kāi)發(fā)者構(gòu)成，堅(jiān)持以高性價(jià)比的服務(wù)為宗旨，普通頁(yè)平均80一頁(yè)，擁有超過(guò)200多客戶建立至今。超過(guò)1500多個(gè)項(xiàng)目。長(zhǎng)期致力于致力于h5、響應(yīng)式前端外包服務(wù)整體解決方案。
著移動(dòng)設(shè)備的普及，響應(yīng)式網(wǎng)站已經(jīng)成為了現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)配。響應(yīng)式網(wǎng)站可以自動(dòng)適應(yīng)不同設(shè)備的屏幕大小，提供更好的用戶體驗(yàn)。如果你想學(xué)習(xí)如何制作響應(yīng)式網(wǎng)站，下面是一些簡(jiǎn)單的步驟和技巧，幫助你開(kāi)始這個(gè)過(guò)程。
一、計(jì)劃和設(shè)計(jì)
在制作響應(yīng)式網(wǎng)站之前，你需要先進(jìn)行計(jì)劃和設(shè)計(jì)。你可以先確定你的網(wǎng)站主要的布局和功能，然后細(xì)化到不同設(shè)備的屏幕大小。考慮到不同設(shè)備的視覺(jué)和交互需求，你可以使用流式布局、媒體查詢、彈性圖片和自適應(yīng)字體等技術(shù)來(lái)實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。
二、使用流式布局
流式布局是指網(wǎng)頁(yè)的布局隨著屏幕大小的變化而自動(dòng)調(diào)整。你可以使用百分比單位來(lái)設(shè)置元素的寬度和間距，而不是固定像素值。這樣，當(dāng)屏幕的大小改變時(shí)，元素的大小和布局也會(huì)自動(dòng)適應(yīng)。
三、使用媒體查詢
媒體查詢是一種CSS3的功能，可以根據(jù)設(shè)備的特性來(lái)應(yīng)用不同的樣式。你可以使用媒體查詢來(lái)設(shè)置不同屏幕大小下的元素樣式，如字體大小、圖片大小、列數(shù)等。通過(guò)媒體查詢，你可以為不同設(shè)備提供最佳的顯示效果。
四、彈性圖片
在響應(yīng)式網(wǎng)站中，圖片也需要自適應(yīng)屏幕大小。你可以使用CSS3的max-width屬性來(lái)限制圖片的最大寬度，使其在小屏幕上不會(huì)溢出。同時(shí)，你也可以使用srcset屬性來(lái)為不同屏幕大小提供不同分辨率的圖片，以提高加載速度和顯示質(zhì)量。
五、自適應(yīng)字體
字體大小在不同屏幕大小下也需要自適應(yīng)。你可以使用CSS3的rem單位來(lái)設(shè)置字體大小，它相對(duì)于根元素的字體大小。通過(guò)設(shè)置根元素的字體大小和使用rem單位，你可以讓字體在不同屏幕大小下按比例自動(dòng)調(diào)整。
六、測(cè)試和優(yōu)化
制作響應(yīng)式網(wǎng)站后，你需要在不同設(shè)備和瀏覽器上進(jìn)行測(cè)試，以確保它能夠在各種情況下正常顯示和操作。你可以使用瀏覽器的開(kāi)發(fā)者工具來(lái)模擬不同設(shè)備的屏幕大小和觸摸操作。同時(shí)，你也可以利用一些在線工具和服務(wù)來(lái)測(cè)試網(wǎng)站的響應(yīng)式性能和兼容性。
七、使用示例
者：前端開(kāi)發(fā)社區(qū)
轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/HVUyOi1BKNeNkwgBUtTf-g
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
