码迷,mamicode.com
首页 > Web开发 > 详细

HTML5与CSS3视口-retina屏幕适配

时间:2018-12-30 20:25:54      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:ice   ges   rem   charset   媒体查询   meta标签   nim   分享   响应式布局   

1.视口

视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样会让移动端出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小,这样会让网页不容易观看,可以使用meta标签,name="viewport"来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。

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

技术分享图片

2.视网膜屏幕(retina屏幕)清晰度解决方案

图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样,但是由于视网膜屏幕的物理像素点比一般的屏幕小,图像在上面好像是被放大了,图像会变得模糊,为了解决这个问题,可以使用比原来大一倍的图像,然后用CSS样式强制把图像的尺寸设为原来图像尺寸的大小。

3.background新属性

(1)background-size:

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>

技术分享图片

HTML5与CSS3视口-retina屏幕适配

标签:ice   ges   rem   charset   媒体查询   meta标签   nim   分享   响应式布局   

原文地址:http://blog.51cto.com/13742773/2337203

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!