三合一自適應(yīng)網(wǎng)站設(shè)計(jì)自適應(yīng)代碼

發(fā)布時(shí)間：2017-12-02    知識(shí)欄目：中網(wǎng)互聯(lián)

 三合一的概念就是自適應(yīng)電腦 手機(jī) 平板的網(wǎng)站

但是這種網(wǎng)站多數(shù)比較死板，因?yàn)榫褪嵌嘈卸嗔械淖赃m應(yīng)轉(zhuǎn)換。

廣州網(wǎng)站建設(shè)中網(wǎng)互聯(lián)工作室告訴下大家三合一網(wǎng)站的代碼重點(diǎn)

 響應(yīng)式廣州網(wǎng)站設(shè)計(jì)是一種網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局，其理念是：集中創(chuàng)建頁(yè)面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對(duì)應(yīng)的布局。

第一步，在頁(yè)面頭部加入viewport標(biāo)簽，這樣可以使網(wǎng)頁(yè)寬度等于屏幕寬度。

代碼如下：

第二步，實(shí)現(xiàn)自動(dòng)探測(cè)屏幕，具體是這樣的，引入css3的media  query，根據(jù)屏幕大小不同來(lái)調(diào)用不同的css。

另外再加一個(gè)768px的，調(diào)用style.css,這樣就可以實(shí)現(xiàn)自動(dòng)了。

第三步，不要使用絕對(duì)寬度，用百分比來(lái)表示寬度。

第四步，字體不要使用絕對(duì)字體px，要使用相對(duì)字體rem

第五步，圖片和多媒體的自適應(yīng)，圖片采用img(max-width:100%)

多媒體采用objet  embed(max-width:100%)

第六步，按照以上思路來(lái)寫(xiě)頁(yè)面和布局，就能輕松實(shí)現(xiàn)響應(yīng)式頁(yè)面設(shè)計(jì)開(kāi)發(fā)了。簡(jiǎn)單吧！