响应式布局知识点

文章概述

本篇文章介绍响应式布局知识点。

视口

用户能看到的页面可见区域就叫视口,用viewport表示。

响应式网站视口的设置标准：

普通屏幕的设置：

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

retina高清屏【推荐】

initial-scale设置0.5能更加精细识别1px;

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

【视口属性注释】

width=device-width：样式中定义的宽度等于设备中定义的宽度；
initial-scale=1.0：初始-比例，缩放比例1；
minimum-scale=1.0：最大缩小比例1；
maximum-scale=1.0：最大放大比例1；
user-scalable=0(或no)：禁止使用者放大缩小;

动态设置视口

在head中加入自动执行的函数，综合retina高分辨率屏和普通屏的dpr（devicePixelRatio）来动态设置视口viewport：

<head>
<!--需要先设置viewport元素-->
<meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--定义自动执行函数-->
!function () {
    //devicePixelRatio=物理设备实际像素/css可使用像素；
    let scale = 1 / devicePixelRatio;
    let viewportElement = document.querySelector('meta[name="viewport"]');
    viewportElement.setAttribute(
        'content',
        'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'
    );
}();
</head>

media query

媒体查询

CSS2允许用户对特定media类型制定样式。
CSS3提供了更加强大的功能：可以针对不同media类型设置样式，还根据设定的宽度或者高度指定样式。

语法格式

1
2
3

@media 媒体类型 and (媒体特性) {
    //... css样式
}

媒体类型

screen: 适用于屏幕；
print：适用于打印机；
all：适用于所有的设备；
tv：适用于电视类设备；
projection(投射)：适用于投影图像,如幻灯片；

screen

screen适用于显示的屏幕，在@media screen{}里设定的样式；

print

针对打印机，在@media print{}里设定的样式。

媒体特性

max-width: 最大宽度;
min-width: 最小宽度；
max-height：最大高度;
min-height: 最小高度；

兼容性

可以使用only关键字，当不支持media query的设备时会忽略media的配置：

1
2
3

@media only screen and (color){
    //... css样式
}

使用媒体查询

引入媒体查询有以下方式：

写在link标签里；
写在css样式里；

写在link标签里

直接写在html头部的link标签里：

1
2
3

<head>
    <link rel="stylesheet" type="text/css" href="" media="screen and (max-width: 320px)">
</head>

写在css样式里

可以直接写在css样式里：

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px !important;}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px !important;}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px !important;}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px !important;}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px !important;}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px !important;}}
@media screen and (min-width:800px){html{font-size:25px}}