18响应式网站--媒体查询

最新推荐文章于 2022-09-02 20:38:37 发布

宠儿呀

最新推荐文章于 2022-09-02 20:38:37 发布

阅读量285

点赞数

分类专栏： html+css笔记文章标签： html html5 css css3 前端

本文链接：https://blog.csdn.net/qq_46055080/article/details/104638269

版权

html+css笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

1、什么是响应式网站

响应式是一种网页设计的技术做法，该设计可使网站在不同的设备（从桌面计算机显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现。

2、响应式网站的核心逻辑

优雅降级，内容优先。

响应式：一个网站去兼容多个终端，而不是为每个终端做特定版本。

优点：

面对不同分辨率，设备灵活性比较高；
快捷解决很多设备的适应问题
适合中小型网站

缺点：

因为要兼容各种设备，工作量很大，效率不高
代码冗余，会出现很多隐藏无用的元素，加载时间长

原理：通过css3新增的媒体查询，定制某个宽度区间的网页布局。

具体表现在：

1、可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页面

在这里插入图片描述

2、可自由排布的内容区块：当页面尺寸变动较大时，能够减少/增加排布的列数
在这里插入图片描述

3、适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化
在这里插入图片描述
4、能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用

在这里插入图片描述
5、能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏

6、能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断

3、媒体查询

能检测到设备屏幕的宽度，通过不同宽度的值，显示不同的样式

超小屏幕（移动设备）：768px以下；
小屏屏幕（平板设备）：768px-992px；
中屏屏幕（标屏设备）：992px-1200px；
大屏设备（宽屏设备）：1200px以上

🎈视口viewport

适配问题：屏幕尺寸都是不一样的

解决方案:百分比布局===流式布局，非固定像素，内容向两侧填充

通过设置viewport，用里面的content值设置视口功能

设置视口宽度=当前设备宽度width=device-width
是否允许用户自动缩放：user-scalable=no(no/yes0/1)
设置默认缩放比例：initial-scale=1.0
设置最大缩放比例：maximum-scale=1.0
设置最小缩放比例：minimum-scale=1.0

<head>
    <meta charset="UTF-8">
    <!-- 视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <title>Document</title>
</head>

媒体类型

all 所有媒体
screen 彩屏设备
print 用于打印机和打印预览
speech 应用于屏幕阅读器等发声设备
braille 应用于盲文触摸式（已废弃）
embossed 用于打印的盲人印刷设备（已废弃）
projection用于投影设备（已废弃）
tty 不适用像素的设备（已废弃）
tv 电视（已废弃）

媒体查询的逻辑关键字

and：并且（和）
not ：用来排除某种制定的媒体类型（非）
only ：(限定某种设备)某种特定的媒体类型

符号后边记得打空格

媒体查询的参数条件(media feature)

(width:600px) 宽
(max-width:600px) 最大宽度 <=600
(min-width: 480px)最小宽度 >=480
(orientation:portrait) 竖屏
(orientation:landscape) 横屏

🎈方式一@media

语法：@media 媒体类型关键字媒体特性{}

代码格式：@media mediatype [and/not/only] (media feature) [and/not/only] (media feature)… { 代码块 };
代码格式：@media 哪种设备判断条件1 参数条件1 判断条件2 参数条件2 … {代码块 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-						scalable=no, initial-scale=1.0,maxiumn-scale=1.0,miniumn-			scale=1.0">
    <title>方式一</title>
   	<style>
		.container {
    		width: 100%;
   			height: 500px;
   			background-color: pink;
    		margin: 0 auto;
					}
		@media screen and (max-width:768px) {
    			/* 屏幕宽度小于等于768px时，粉色 */
				}
		@media screen and (min-width:768px) and (max-width:992px) {
    			.container {
       					background-color: lightblue;
                    /* 768px<=屏幕宽度<=992px时，lightblue */
  							  }
																}
		@media screen and (min-width:992px) and (max-width:1200px) {
    			.container {
       				 	background-color: yellow;
                    /* 992px<=屏幕宽度<=1200px时，yellow */
   							 }
																	}
		@media screen and (min-width:1200px){
    			.container {
        				background-color: red;
                    /* 屏幕宽度>=1200px时，red */
    						}
}
</style>
</head>
<body>
    <div class="container">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
        <div class="box04"></div>
    </div>
</body>
</html>

在这里插入图片描述

🎈方式二@inport

代码格式：@inport url(css文件地址) mediatype [and/not/only] (media feature) [and/not/only] (media feature)；

<style>
        @import url(css/media01.css) screen and (max-width:768px);
        @import url(css/media02.css) screen and (min-width:768px) and (max-width:992px);
   /*css：
    	.container {
    		background-color: lightgreen;
					}
    	.container>div {
            width: 90%;
            height: 200px;
            margin: 10px auto;
            background-color: grey;
}
     */
    
.container>div {
    width: 90%;
    height: 200px;
    margin: 10px auto;
    background-color: grey;
}*/
</style>
<body>
    <div class="container">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
        <div class="box04"></div>
    </div>
</body>

🎈方式三link

代码格式：<link rel=“文件类型”href=“文件地址”media=“ mediatype [and/not/only] (media feature) …”>
代码格式：<link rel=“文件类型”href=“文件地址”media=“ 哪种设备判断条件1 参数条件1 …“>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/media01.css" media="screen and (max-width:768px)">
    <link rel="stylesheet" href="css/media02.css" media="screen and (min-width:768px) and (max-width:992px)">
</head>
<body>
    <div class="container">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
        <div class="box04"></div>
    </div>
</body>
</html>

🎈断点设计

传统的确定断点的方案是使用一些固定的宽度进行划分，如 320px(iPhone)，768px(iPad)，960px 或 1024px(传统 PC 浏览器)，这种方案的好处是很好照顾到了当前主流的设备，但是技术发展实现是太快了，各种不同分辨率的设备层出不穷，比如一些手机尺寸接近平板，一些平板尺寸比电脑更大等等，很难保证未来能很好的支持各种设备。
另外一种确定断点的方法是根据内容进行设置断点以及设置多少个断点。随着各种尺寸设备的出现，断点命名采用更为通用的方式，而不是用设备来命名更为合适。