响应式网页设计

原创已于 2022-07-05 20:21:53 修改 · 3.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #javascript

于 2020-02-23 10:53:56 首次发布

CSS/CSS3 专栏收录该内容

4 篇文章

订阅专栏

什么是响应式网页？

响应式网页的核心思想：“一次设计，普遍适用”

不管使用什么设备，打开及显示的都是同一个地址、同一个网页，布局及显示适应不同的浏览环境

在这里插入图片描述

媒体查询及应用

媒体查询（Media Query）是CSS 3 中获取用户行为和设备环境（比如屏幕宽度、屏幕分辨率、设备方向等）并适配相应的CSS规则的过程，可以让CSS 能更精确地作用于不同的媒体类型和同一媒体的不同条件，也可以为一些特定的输出设备定制特定的显示效果，从而为不同终端的用户都能提供较好的浏览体验。

关键字：@media

//CSS 3 媒体查询定义语句的基本格式：
<style>
@media (适用条件1) and/or (适用条件2)…
{适用的CSS 样式}
</style>

<style type="text/css">
   @media screen and (max-width: 300px) {
    body {
     background-color: lightblue;
    }
   }
  </style>

<style type="text/css">
   @media screen and (min-width:960px) and (max-width:1200px){
   body{
   background:yellow;
    }
   }
  </style>

媒体查询支持的媒体类型
在这里插入图片描述

对所有媒体类型都适用：@media all ……

指定适用于多种设备：@media screen and speech …

只适用于某种设备：@media only screen…

常用媒体特效
在这里插入图片描述

<style type="text/css">
   @media only screen and (orientation: portrait) {
       body { background-color: lightblue; }
   }
  </style>

响应式网页呈现

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

作用：让当前屏幕可视区域的宽度等于设备的宽度，同时不允许用户手动缩放。

常见设备的默认viewport
在这里插入图片描述

绝对大小单位：px（像素）

相对大小单位：%（百分比）、em（相对于当前元素的父元素）、rem（相对于根元素<html>）等。

响应式图像适配

根据屏幕像素密度或屏幕宽度来匹配不同的图像文件:

<img srcset ="img/1_1280.jpg 3x,img/1_640.jpg 2x,img/1_320.jpg 1x"/>

根据屏幕的宽度来匹配不同的图像文件:

<img src="img/1_1280.jpg"  srcset ="img/1_1280.jpg 1280w,img/1_640.jpg 640w,img/ 1_320.jpg 320w"/>

使用类似媒体查询语句来设置图像的大小

<img src="img/1_1280.jpg" sizes="(min-width:1200px) calc(43vw), 50vw"/>