pc端適配移動端

calx 發布于2019-08-29 17:15 / 1640人閱讀

摘要：端和移動端共用一套代碼允許網頁寬度自動調整在網頁代碼的頭部，加入一行元標簽所有主流瀏覽器都支持這個設置，包括。

pc端和移動端共用一套代碼 1. 允許網頁寬度自動調整

在網頁代碼的頭部，加入一行viewport元標簽

所有主流瀏覽器都支持這個設置，包括IE9。對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js

2. 不使用絕對寬度

由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要，可以用width:~%或者
width:auto;

3. 相對大小的字體

字體也不能使用絕對大小（px），而只能使用相對大小（em）

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

上面的代碼指定，字體大小是頁面默認大小的100%，即16像素

h1{
    font-size:1.5em;
}

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

small{
    font-size:0.875em;
}

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

4. 流動布局fluidgrid

“流動布局”的含義是，各個區塊的位置都是浮動的，不是固定不變的

.main{
    float:right;
    width:70%;
}
.leftBar{
    float:left;
    width:25%;
}

float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現,另外，絕對定位（position:absolute）的使用，也要非常小心

5. 選擇加載CSS

“自適應網頁設計”的核心，就是CSS3引入的MediaQuery模塊

如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件

6. CSS的@media規則

同一個CSS文件中，也可以根據不同的屏幕分辨率，選擇應用不同的CSS規則

// 屏幕寬度小于400像素
@mediascreenand(max-device-width:400px){
    .column{
        float:none;
        width:auto;
    }
    #sidebar{
        display:none;
    }
}

7. 圖片的自適應（fluidimage）

圖片的自動縮放img,object{max-width:100%;}老版本的IE不支持max-width，所以只好寫成img{width:100%;}
windows平臺縮放圖片時，可能出現圖像失真現象。這時，可以嘗試使用IE的專有命令：img{-ms-interpolation-mode:bicubic;}
或者，EthanMarcotte的imgSizer.js

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

GPU云服務器云服務器移動端適配移動端適配方案移動端適配 js pc端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114201.html

移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
移動端適配方案

摘要：業務環境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候將注意力集中在中間區域。移動端適配方案移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業務場景可能會需要不同的適配方案來進行移動端適配，向下兼容的baseline也需要提前訂好。整體寬高其實移動端適配就和下面的玩具一樣，...

feng409 2019-08-30 15:54 評論0 收藏0
我對移動端適配的了解

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

import. 2019-08-30 14:16 評論0 收藏0
我對移動端適配的了解

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

snowLu 2019-08-22 15:45 評論0 收藏0
我對移動端適配的了解

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

XGBCCC 2019-08-02 10:03 評論0 收藏0