成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

pc端適配移動(dòng)端

happyfish / 2803人閱讀

摘要：端和移動(dòng)端共用一套代碼允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整在網(wǎng)頁(yè)代碼的頭部，加入一行元標(biāo)簽所有主流瀏覽器都支持這個(gè)設(shè)置，包括。

pc端和移動(dòng)端共用一套代碼 1. 允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整 
在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽
所有主流瀏覽器都支持這個(gè)設(shè)置，包括IE9。對(duì)于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js
2. 不使用絕對(duì)寬度 
由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。這一條非常重要，可以用width:~%或者
width:auto;
3. 相對(duì)大小的字體

字體也不能使用絕對(duì)大?。╬x），而只能使用相對(duì)大?。╡m）

body {
    font:normal100%Helvetica,Arial,sans-serif;
}

上面的代碼指定，字體大小是頁(yè)面默認(rèn)大小的100%，即16像素

h1{
    font-size:1.5em;
}

然后，h1的大小是默認(rèn)大小的1.5倍，即24像素（24/16=1.5）

small{
    font-size:0.875em;
}

small元素的大小是默認(rèn)大小的0.875倍，即14像素（14/16=0.875）

4. 流動(dòng)布局fluidgrid 
“流動(dòng)布局”的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的
.main{
    float:right;
    width:70%;
}
.leftBar{
    float:left;
    width:25%;
}
float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn),另外，絕對(duì)定位（position:absolute）的使用，也要非常小心
5. 選擇加載CSS 
“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”的核心，就是CSS3引入的MediaQuery模塊

如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件
6. CSS的@media規(guī)則 
同一個(gè)CSS文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的CSS規(guī)則
// 屏幕寬度小于400像素
@mediascreenand(max-device-width:400px){
    .column{
        float:none;
        width:auto;
    }
    #sidebar{
        display:none;
    }
}
7. 圖片的自適應(yīng)（fluidimage） 
圖片的自動(dòng)縮放img,object{max-width:100%;}老版本的IE不支持max-width，所以只好寫(xiě)成img{width:100%;}
windows平臺(tái)縮放圖片時(shí)，可能出現(xiàn)圖像失真現(xiàn)象。這時(shí)，可以嘗試使用IE的專有命令：img{-ms-interpolation-mode:bicubic;}
或者，EthanMarcotte的imgSizer.js

addLoadEvent(function(){
    varimgs=document.getElementById(“content”).getElementsByTagName(“img”);
    imgSizer.collate(imgs);
});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108612.html

相關(guān)文章

  • 移動(dòng)端布局與適配

    摘要：實(shí)戰(zhàn)之微信錢(qián)包騰訊服務(wù)界面網(wǎng)格布局是讓開(kāi)發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對(duì)于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁(yè)面多終端適配的問(wèn)題。 grid實(shí)戰(zhàn)之微信錢(qián)包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開(kāi)發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動(dòng)端頁(yè)面適配—...

    Clect 評(píng)論0 收藏0

  • 移動(dòng)端適配方案

    摘要：業(yè)務(wù)環(huán)境是決定整體項(xiàng)目的適配方案的核心因素。而淘寶的主站和類(lèi)似，分為移動(dòng)端頁(yè)面和端頁(yè)面，端頁(yè)面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時(shí)候?qū)⒆⒁饬性谥虚g區(qū)域。 移動(dòng)端適配方案 移動(dòng)端適配方案是一個(gè)老生常談的話題，但是對(duì)于不同的項(xiàng)目、不同的業(yè)務(wù)場(chǎng)景可能會(huì)需要不同的適配方案來(lái)進(jìn)行移動(dòng)端適配，向下兼容的baseline也需要提前訂好。 整體寬高 其實(shí)移動(dòng)端適配就和下面的玩具一樣，...

    feng409 評(píng)論0 收藏0

  • 我對(duì)移動(dòng)端適配的了解

    摘要：隨著移動(dòng)端的發(fā)展，在手機(jī)上看電腦端的頁(yè)面已成為非常普及現(xiàn)象。方案一固定高度，使其寬度自適應(yīng)這也是我接觸移動(dòng)端適配第一次使用的方案。 不知不覺(jué)做前端已經(jīng)兩年了，從PC端，移動(dòng)端，微信小程序一路走來(lái)到今天剛剛開(kāi)放注冊(cè)的快應(yīng)用(手機(jī)廠商對(duì)抗小程序的新技能,所以在注冊(cè)時(shí)用的是qq郵箱的話要去垃圾箱里才能找到注冊(cè)郵件)，對(duì)于前端圈日新月異的磅礴發(fā)展對(duì)于大前端發(fā)展是喜聞樂(lè)見(jiàn)的，這次的快應(yīng)用的手機(jī)廠...

    import. 評(píng)論0 收藏0

  • 我對(duì)移動(dòng)端適配的了解

    摘要：隨著移動(dòng)端的發(fā)展，在手機(jī)上看電腦端的頁(yè)面已成為非常普及現(xiàn)象。方案一固定高度，使其寬度自適應(yīng)這也是我接觸移動(dòng)端適配第一次使用的方案。 不知不覺(jué)做前端已經(jīng)兩年了，從PC端，移動(dòng)端，微信小程序一路走來(lái)到今天剛剛開(kāi)放注冊(cè)的快應(yīng)用(手機(jī)廠商對(duì)抗小程序的新技能,所以在注冊(cè)時(shí)用的是qq郵箱的話要去垃圾箱里才能找到注冊(cè)郵件)，對(duì)于前端圈日新月異的磅礴發(fā)展對(duì)于大前端發(fā)展是喜聞樂(lè)見(jiàn)的，這次的快應(yīng)用的手機(jī)廠...

    snowLu 評(píng)論0 收藏0

  • 我對(duì)移動(dòng)端適配的了解

    摘要：隨著移動(dòng)端的發(fā)展，在手機(jī)上看電腦端的頁(yè)面已成為非常普及現(xiàn)象。方案一固定高度，使其寬度自適應(yīng)這也是我接觸移動(dòng)端適配第一次使用的方案。 不知不覺(jué)做前端已經(jīng)兩年了，從PC端，移動(dòng)端，微信小程序一路走來(lái)到今天剛剛開(kāi)放注冊(cè)的快應(yīng)用(手機(jī)廠商對(duì)抗小程序的新技能,所以在注冊(cè)時(shí)用的是qq郵箱的話要去垃圾箱里才能找到注冊(cè)郵件)，對(duì)于前端圈日新月異的磅礴發(fā)展對(duì)于大前端發(fā)展是喜聞樂(lè)見(jiàn)的，這次的快應(yīng)用的手機(jī)廠...

    XGBCCC 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<