HTML5+CSS3学习笔记(第18章)响应式网页设计

HTML5+CSS3学习笔记(第18章)响应式网页设计

18.1概述

meta标签,可以设置视口的宽度
使用媒体查询
使用第三方框架Bootstrap框架

18.2像素和屏幕分辨率

像素:图像元素 表示数字图像中的一个最小单位
屏幕分辩率:
设备像素
像素密度ppi
css像素px,通过换算

18.3视口

视口属性viewport

<meta name="viewport" content= width=device-width,initial-sacle=1.0">

媒体查询

@media关键字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width,initial-scale=1,maximum-sacale=1,user-scalable=no">
    <title>Title</title>
    <style>
        body{
            background-color: red;
        }
        @media screen and (max-width: 720px) and (min-width: 320px){
            body{
                background-color: blue;
            }
        }
    </style>
</head>
<body>

</body>
</html>

18.4响应式网页的布局设计

单一固定式布局
响应式固定布局
响应式弹性布局

你可能感兴趣的:(笔记,CSS3,HTML5)