HTML5與CSS3視口-retina屏幕適配

時間 2019-11-15

標籤 html5 html css3 css retina 屏幕適配欄目 HTML5 简体版

原文原文鏈接

1.視口css

視口是移動設備上用來顯示網頁的區域，通常會比移動設備可視區域大，寬度多是980px或者1024px，目的是爲了顯示下整個爲PC端設計的網頁，這樣會讓移動端出現橫向滾動條，爲了不這種狀況，移動端會將視口縮放到移動端窗口的大小，這樣會讓網頁不容易觀看，可使用meta標籤，name="viewport"來設置視口的大小，將視口的大小設置爲和移動設備可視區同樣的大小。html

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> 
<title>窗口</title>
<style type="text/css">瀏覽器

.box{
    width: 300px;
    height: 300px;
    background-color: gold;
}
</style>

</head>ide

<body>函數

<div class="box"></div>

</body>佈局

2.視網膜屏幕（retina屏幕）清晰度解決方案url

圖像在視網膜屏幕上顯示的大小和在通常屏幕上顯示的大小同樣，可是因爲視網膜屏幕的物理像素點比通常的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，爲了解決這個問題，可使用比原來大一倍的圖像，而後用CSS樣式強制把圖像的尺寸設爲原來圖像尺寸的大小。scala

3.background新屬性設計

（1）background-size：3d

length：用長度值指定背景圖像大小，不容許負值

percentage：用百分比指定背景圖像大小，不容許負值

auto：背景圖像的真實大小

cover：將背景圖像等比例縮放到徹底覆蓋容器，背景圖像有可能超出容器

contain：將背景圖像等比例縮放到寬度和高度與容器的寬高相等，背景圖像始終被包含在容器內

<head>
<meta charset="utf-8">
<title>scale</title>
<style type="text/css">

.box{
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    background: url(images/3_02.png) no-repeat;
    /*background-size: 100%,100%;*/  /*用指定大小，縮放不成功*/
    /*background-size: auto; */       /*背景圖真實大小*/
    /*background-size: contain;*/         /*按寬高等比例縮放*/
    background-size: cover;           /*等比例縮放到徹底覆蓋容器*/
    margin: 50px auto 0;
}
</style>

</head>

<body>

<div class="box"></div>

</body>

4.PC級移動端頁面適配方法

（1）全適配：響應式佈局+流體佈局

（2）移動端適配：

流體佈局+少許響應式
基於rem的佈局

（3）流體佈局

就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體佈局中，元素的邊線沒法用百分比，可使用樣式中的計算函數calc（）來設置高度，或者使用box-sizing屬性將盒子設置爲從邊線計算盒子尺寸。

calc（）
能夠經過計算的方式給元素加尺寸，好比：width：calc（25%-4px）;

box-sizing
content-box默認的盒子尺寸計算方式

border-box設置盒子的尺寸計算方式爲從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>流體佈局</title>
<style type="text/css">

body{
    margin: 0px;
}
.box a{
    display: block;
    /*width: calc(25% - 4px);*/       /*方法一計算函數，總體25%-邊框的4個像素*/
    width: 25%;
    height: 100px;
    background-color: aqua;
    float: left;
    text-align: center;
    line-height: 100px;
    text-decoration: none;
    color: antiquewhite;
    border: 1px solid #5B5758;

    box-sizing: border-box;         /*方法二：設置盒子的計算方式從邊框開始算*/
}
</style>

</head>

<body>

<div class="box">
    <a href="#">菜單</a>
    <a href="#">菜單</a>
    <a href="#">菜單</a>
    <a href="#">菜單</a>
</div>

</body>
</html>

（4）響應式佈局

式使用媒體查詢方式，經過查詢瀏覽器寬度，不一樣的寬度應用不一樣的樣式塊，每一個樣式塊對應的是該寬度下的佈局方式，從而實現響應式佈局。響應式佈局的頁面能夠適配多種終端屏幕（pc、平板、手機）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>響應式佈局</title>
<style type="text/css">

.box a{
    display: block;
    width: 23%;
    height: 100px;
    background-color: blueviolet;
    margin: 1%;
    float: left;
    text-align: center;
    text-decoration: none;
    line-height: 100px;

}
@media (max-width:800px){          /*當屏幕小於800px執行如下樣式*/
    .box a{
        width: 46%;
        margin: 2%;
    }
}
@media (max-width:500px){          /*當屏幕小於500px執行如下樣式*/
    .box a{
        width: 94%;
        margin: 3%;
    }
}
</style>

</head>

<body>

<div class="box">
    <a href="#">1.哈哈哈</a>
    <a href="#">2.哈哈哈</a>
    <a href="#">3.哈哈哈</a>
    <a href="#">4.哈哈哈</a>
</div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。