《响应式Web设计——HTML5和CSS3实战》——知识点整理总结(持更~)

最新推荐文章于 2023-06-12 11:12:04 发布

amaoagou_

最新推荐文章于 2023-06-12 11:12:04 发布

阅读量1.5k

点赞数 1

分类专栏： html&css

本文链接：https://blog.csdn.net/amaoagou_0124/article/details/80444231

版权

html&css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.HTML5、CSS3及响应式入门

1.1 什么是响应式
如果要用一句话概括，那么响应式网页是针对人以设备对网页内容进行完美布局的一种显示机制。相反，如果需要根据不同设备提供特定的内容和功能，那就需要一个真正的“手机版”网站。这种情况下，手机版网站会提供与桌面版网站完全不同的用户体验。
1.2 视口和屏幕尺寸
视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等，也就是网页实际显示的区域。屏幕尺寸是指设备的物理显示区域。

2.媒体查询：支持不同的视口

2.1 媒体查询概述
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询可用于检测的媒体特性有width、height和color等。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果
2.2 媒体查询语法

body {
  background-color: grey;
}
@media screen and (max-width: 960px) {
    body {
      background-color: red;
    }
}
@media  screen and (max-width: 768px) {
    body {
      background-color: orange;
    }
}
@media  screen and (max-width: 550px) {
    body {
      background-color: yellow;
    }
}
@media  screen and (max-width: 320px) {
    body {
      background-color: green;
    }
}

将这段代码放在某个css文件的最后，查看与之关联的网页，改变视口大小，就可以看到背景颜色随视口大小而变换的效果了。
媒体查询的几种方式：
1、在向页面的<head></head>标签中链接CSS文件是可以使用媒体查询

/*在视口宽度大于800px的显示屏设备才加载该文件*/
  <link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px)" href="800wide-portrait-screen.css">

2、在CSS样式表中使用媒体查询

/*在屏幕宽度小于等于400像素的设备上，h1元素文字颜色变为绿色*/
@media screen and (max-device-width:400px){
    h1{
        color:green
    }
}

3、使用CSS的@import指令在当前样式表中引入其他样式表（会增加HTTP请求，影响加载速度）

/*给视口最大宽度为360像素的显示屏设备加载一个名为phone.css的样式表*/
@import url("phone.css") screen and (max-width:360px)

2.3 媒体查询能检测到的特性

width:视口宽度
height：视口高度
device-width：设备屏幕的宽度
device-height:设备屏幕的高度
orientation:检测设备处于横向还是纵向
aspect-ratio：基于视口宽度和高度的宽高比
device-aspect-ratio:基于设备屏幕宽度和高度的宽高比
color:每种颜色的位数
color-index:设备的颜色索引表中的颜色数
monochrome:检测单色帧缓冲区中每像素所使用的位数
resolution:用来检测屏幕或打印机的分辨率
scan:电视机的扫描方式，值可设为progressive或interlace
grid:用来检测输出设备是网格设备还是位图设备

2.4 重置样式
这里写图片描述
2.5 阻止移动浏览器自动调整页面大小
使移动端的页面在不同设备上显示效果一样，可以将页面宽度设为设备宽度。viewport具体用法

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

width 设置页面宽度，width=device-width表示页面宽度等于设备宽度
initial-scale 设置页面初识缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最小缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最大缩放值，为一个数字，可以带小数
user-scalable 是否允许用户进行缩放
2.6 响应式设计中内容始终优先
在视口区的标签顺序决定了侧边栏会显示在主内容区的前面，而在窄视口设备中，我们应该考虑到先让用户看到主内容。

3.拥抱流式布局

百分比布局和媒体查询结合在一起构成响应式设计的核心

3.1 将网页熊固定布局修改为百分比布局

  目标元素宽度÷上下文元素宽度=百分比宽度

上述公式不仅可以将元素的固定宽度转换成百分比，同时还可以将字体的固定像素大小转换为相对单位，即em代替px。现代浏览器的默认文字大小都是16px。因此，一开始给body标签下应用以下三条语句效果是一样的。

font-size:100%;
font-size:16px;
font-size:1em;

如果某个元素样式中有font-size:48px;那我们通过转换，用48÷3=16，可以将这个样式改成font-size:3em;要注意的是该元素的大小是针对其父元素而言的，而行高是针对其本身而言的，所以运用公式时要注意。

#content h1{
    font-size: 69px;
}
#content h1 span{
    font-size: 38px;
    line-height: 40px;
}
/*修改后*/
#content h1{
    font-size: 4.3125em; /*69÷16*/
}
#content h1 span{
    line-height: 1.0526315em; /*40÷38*/
    font-size: 0.5507246em; /*38÷69*/
}

接着实现图片的随流动布局相应缩放，具体在css中做如下声明就好了

img{
  max-width：100%
}

4.响应式中的HTML5

4.1 如何编写一个HTML5网页

<!DOCTYPE html>
<html lang=zh>
<head>
<meta charset=utf-8>

HTML5的代码更为简洁。比如之前

<link href="css/home.css" rel="stylesheet" type="text/css"/>

而在HTML5中可以不那么仔细，没有闭合标签的斜线以及引号，同样可以

<link href=css/home.css rel=stylesheet >

当然你也根据自己的习惯编写代码。
在HTML5中，<a>标签内可以包含多个元素。但不能包含a标签也不能嵌套表单。

<a>
    <h1>title</h1>
    <p>this is a paragraph</p>
    <img src="img/arrow_btn1.png" />
</a>

4.2 HTML5 语义化标签
语义化就是给HTML标签赋予意义的过程。html语义化可以让页面的内容结构化，便于浏览器解析，便于搜索引擎解析（有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重），并提高代码的可维护度和可重用性。少用div、span这样无语义的通用容器。
常见语义化标签<section>、<header>、<nav> 、<footer>、<hgroup>、<article>、<aside>、<address>、<b>、<i>、<em>
4.3 给页面添加视频或音频
视频 <video></video>
音频 <audio></audio>
可以设置宽高, 区别在于<audio></audio> 没有可视内容区域。
提供备用的媒体文件（如下）如果浏览器支持Ogg格式，则使用第一个文件，否则继续解析下一个<source>标签

<video width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">
  <source src="video/myVideo.ovg" type="video/ogg">
  <source src="video/myVideo.mp4" type="video/mp4">
  hello wrold!
 </video>

4.4 离线web
给每个需要离线使用的网页指定一个后缀名为.manifest的文件

<html lang="en" manifest="/offline.manifest">

manifest文件必须以 CACHE MANIFEST 开头。CACHE：部分罗列了所有离线使用所需的文件。NETWORK：部分罗列了所有不需要被缓存的文件。在网络畅通是跳过缓存的一些文件。FALLBACK：部分使用/字符定义了一个URL模板。作用是访问每个页面时都会问“缓存中有这个页面吗？”有的话显示缓存，没有的话显示制定的文件。

CACHE MANIFEST
#v1

CACHE:
index.html
css/main.css
img/backgroud1.jpg

NETWROK:
*

FALLBACK:
//offline.html

amaoagou_

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
《响应式Web设计——HTML5和CSS3实战》——知识点整理总结(持更~)

1.HTML5、CSS3及响应式入门1.1 什么是响应式如果要用一句话概括，那么响应式网页是针对人以设备对网页内容进行完美布局的一种显示机制。相反，如果需要根据不同设备提供特定的内容和功能，那就需要一个真正的“手机版”网站。这种情况下，手机版网站会提供与桌面版网站完全不同的用户体验。 1.2 视口和屏幕尺寸视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等，也就是网页实际显示的区...
复制链接

扫一扫