HTML5與CSS3視口-retina屏幕適配

發(fā)布時(shí)間：2020-06-27 21:17:53 來(lái)源：網(wǎng)絡(luò) 閱讀：654 作者：bigbeatwu 欄目：web開發(fā)

1.視口

視口是移動(dòng)設(shè)備上用來(lái)顯示網(wǎng)頁(yè)的區(qū)域，一般會(huì)比移動(dòng)設(shè)備可視區(qū)域大，寬度可能是980px或者1024px，目的是為了顯示下整個(gè)為PC端設(shè)計(jì)的網(wǎng)頁(yè)，這樣會(huì)讓移動(dòng)端出現(xiàn)橫向滾動(dòng)條，為了避免這種情況，移動(dòng)端會(huì)將視口縮放到移動(dòng)端窗口的大小，這樣會(huì)讓網(wǎng)頁(yè)不容易觀看，可以使用meta標(biāo)簽，name="viewport"來(lái)設(shè)置視口的大小，將視口的大小設(shè)置為和移動(dòng)設(shè)備可視區(qū)一樣的大小。

<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>

<body>

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

</body>

HTML5與CSS3視口-retina屏幕適配

2.視網(wǎng)膜屏幕（retina屏幕）清晰度解決方案

圖像在視網(wǎng)膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣，但是由于視網(wǎng)膜屏幕的物理像素點(diǎn)比一般的屏幕小，圖像在上面好像是被放大了，圖像會(huì)變得模糊，為了解決這個(gè)問(wèn)題，可以使用比原來(lái)大一倍的圖像，然后用CSS樣式強(qiáng)制把圖像的尺寸設(shè)為原來(lái)圖像尺寸的大小。

3.background新屬性

（1）background-size：

length：用長(zhǎng)度值指定背景圖像大小，不允許負(fù)值

percentage：用百分比指定背景圖像大小，不允許負(fù)值

auto：背景圖像的真實(shí)大小

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

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

<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; */       /*背景圖真實(shí)大小*/
    /*background-size: contain;*/         /*按寬高等比例縮放*/
    background-size: cover;           /*等比例縮放到完全覆蓋容器*/
    margin: 50px auto 0;
}
</style>

</head>

<body>

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

</body>

HTML5與CSS3視口-retina屏幕適配

4.PC級(jí)移動(dòng)端頁(yè)面適配方法

（1）全適配：響應(yīng)式布局+流體布局

（2）移動(dòng)端適配：

流體布局+少量響應(yīng)式
基于rem的布局

（3）流體布局

就是使用百分比來(lái)設(shè)置元素的寬度，元素的高度按實(shí)際高度寫固定值，流體布局中，元素的邊線無(wú)法用百分比，可以使用樣式中的計(jì)算函數(shù)calc（）來(lái)設(shè)置高度，或者使用box-sizing屬性將盒子設(shè)置為從邊線計(jì)算盒子尺寸。

calc（）
可以通過(guò)計(jì)算的方式給元素加尺寸，比如：width：calc（25%-4px）;

box-sizing
content-box默認(rèn)的盒子尺寸計(jì)算方式

border-box設(shè)置盒子的尺寸計(jì)算方式為從邊框開始，盒子的尺寸，邊框和內(nèi)填充算在盒子尺寸內(nèi)。

<!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);*/       /*方法一計(jì)算函數(shù)，整體25%-邊框的4個(gè)像素*/
    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;         /*方法二：設(shè)置盒子的計(jì)算方式從邊框開始算*/
}
</style>

</head>

<body>

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

</body>
</html>

HTML5與CSS3視口-retina屏幕適配

（4）響應(yīng)式布局

式使用媒體查詢方式，通過(guò)查詢?yōu)g覽器寬度，不同的寬度應(yīng)用不同的樣式塊，每個(gè)樣式塊對(duì)應(yīng)的是該寬度下的布局方式，從而實(shí)現(xiàn)響應(yīng)式布局。響應(yīng)式布局的頁(yè)面可以適配多種終端屏幕（pc、平板、手機(jī)）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>響應(yīng)式布局</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){          /*當(dāng)屏幕小于800px執(zhí)行以下樣式*/
    .box a{
        width: 46%;
        margin: 2%;
    }
}
@media (max-width:500px){          /*當(dāng)屏幕小于500px執(zhí)行以下樣式*/
    .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>

HTML5與CSS3視口-retina屏幕適配

向AI問(wèn)一下細(xì)節(jié)

HTML5與CSS3視口-retina屏幕適配

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽