首页 > 代码库 > BootStrap学习之先导篇——响应式网页

BootStrap学习之先导篇——响应式网页

2024-08-23 23:20:12   214人阅读

Bootstrap学习之前，要知道响应式网页的原理。

1.什么是响应式网页？

  一个页面，可以根据浏览设备的不同，以及特性的不同，而自动改变布局、大小等。使得在不同的设备上上都可以呈现优秀的界面。

  优点：可以自动适配PC、PAD、PHONE浏览器屏幕

不足：代码变复杂，需要考虑更多兼容性，并不适合内容非常多网页

 

2.需要掌握的是viewport的概念

早期的网页都是比较大，用于在手机屏幕中浏览，只能进行缩小，导致用户的浏览体验不好。iOS中提出了Viewport（视口）的概念，可以任意的指定大小，显示任意大小的网页：

 技术分享

网页内容不再缩放得很小，可以看清。Android也引用该概念。

为了防止视口宽度超过手机屏幕宽度，推荐设置为width=device-width，这样使得响应式网页可以根据当前设备设置vieport的宽度

 

3.如何手写响应式网页

  (1)添加viewport元标签

       <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

　　注意几个参数的意义：user-scalable：用户是否可缩放

  (2)容器宽度尽量使用相对尺寸，不用绝对单位：100%之类

  (3)文字尽量使用相对尺寸，不用绝对单位：rem和em

  (4)图片尽量使用相对尺寸，代替绝对单位

       img {

              max-width: 100%;   /*不会超过图片的原始尺寸，防止无限放大产生的失真*/

       }

  (5)尽量避免固定布局，使用流式布局

       1)float: left;

       2)display: inline-block;

  (6)使用CSS3 Media Query技术，实现有选择性的执行CSS，这是BootStrap实现的基础！！

 

4.CSS3媒体查询技术

Media：媒体、媒介，指浏览网页的设备，如screen(pc/pad/phone/watch)、print、tv、projection、tty(命令行、针式打印机)、braille等

Query：查询出浏览设备的特性，如宽、高、色彩深度、解析度、方向等

CSS3 Media Query：在CSS中，根据浏览设备的类型、特性不同而有选择性的执行不同的CSS代码。

 

比如：现有一个HTML页面，里面有一个div，根据不同的设备宽度，设置不同的背景颜色。

HTML片段：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>响应式网页</title>
    </head>
    <body>
        <div class="box">
            
        </div>
    </body>
</html>

然后，给HTML页面添加响应式的媒体查询CSS代码，当设备宽度大于992px时，为红色

<style type="text/css">
    .box{
        width:50%;
        min-height: 100px;
    }
    @media screen and (min-width: 992px) {
        .box {
            background-color: #f00;
        }
    }
            
</style>

技术分享

当设备宽度在768px和991px之间时，为绿色

@media screen and (min-width: 768px) and (max-width:991px) {
    .box {
        background-color: #0f0;
    }
}

技术分享

当设备宽度小于767px时，为蓝色

@media screen and (max-width: 767px) {
    .box {
        background-color: #00f;
    }
}

技术分享

 

总结：

注意①.在头部添加<meta name="viewport" content="width=device-width">     ②.@media screen and ( min-width:..)/(max-width:..)的语法方式

一切技术的学习都要知道原理，还有就是看官网！此处，我只是为了给自己整理一下笔记，(*^__^*) 嘻嘻……

BootStrap学习之先导篇——响应式网页


联系
我们