博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【网页设计】35:媒体查询
阅读量:725 次
发布时间:2019-03-21

本文共 2782 字,大约阅读时间需要 9 分钟。

第35节:媒体查询


在这里插入图片描述

  • 媒体查询概念:针对不同的设备类型定义不同的样式

在这里插入图片描述

1.响应式网站:

  • 响应式概念:一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本

  • 响应式开发原理:使用媒体查询media针对不同宽度的设备进行布局和样式的设置,从而达到适配不同设备的目的

    在这里插入图片描述

  • 响应式代码演示:

			
第35节:媒体查询
.box{
height: 400px; background-color: red;}
.box{
height: 400px; background-color: yellow;}
.box{
height: 400px; background-color: purple;}

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

可以看到div标签的样式在随浏览器窗口宽度变化而变化,从style1变化到style3,这就是响应式的原理

2.自适应网站:

  • 自适应概念:多套页面适配不同终端,网页自适应显示在不同大小的终端设备上

  • 自适应代码演示:

			
35节:媒体查询
*{
padding: 0; margin: 0;}.box{
height: 400px;}/* 自适应的写法 *//* @media 设备类型 and 设备尺寸 { } */@media screen and (min-width:1200px) {
.box{
background-color: pink; width: 90%; font-size: 24px; }}@media screen and (min-width:950px) and (max-width:1200px) {
.box{
background-color: skyblue; width: 60%; font-size: 18px; }}@media screen and (max-width:950px) {
.box{
background-color: orange; width: 40%; font-size: 14px; }}

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3.响应式与自适应对比

在这里插入图片描述

4.代码演示:

			
微软中国模块搭建

适用于工作地点

  • Windows 10 企业版

    下载适用于 IT 专业人士的 90 天免费评估版

    立即下载
  • Windows 10 企业版

    下载适用于 IT 专业人士的 90 天免费评估版

    立即下载
  • Windows 10 企业版

    下载适用于 IT 专业人士的 90 天免费评估版

    立即下载
  • Windows 10 企业版

    下载适用于 IT 专业人士的 90 天免费评估版

    立即下载
.pro_list{
width: 95%; margin: 0 auto;}/* 标题部分 */.title{
margin: 30px 0 20px;}/* 产品列表部分 */.pro ul{
overflow: hidden; margin-right: -1%;}.pro ul li{
float: left; width: 24%; margin-right: 1%;}.pro ul li img{
width: 100%;}/* 文字部分 */.titles h3{
margin: 30px 0 10px;}.titles p{
margin-bottom: 10px;}
.pro_list{
width: 95%; margin: 0 auto;}/* 标题部分 */.title{
margin: 30px 0 20px;}/* 产品列表部分 */.pro ul{
overflow: hidden; margin-right: -1%;}.pro ul li{
float: left; width: 49%; margin-right: 1%; margin-bottom: 20px;}.pro ul li img{
width: 100%;}/* 文字部分 */.titles h3{
margin: 30px 0 10px;}.titles p{
margin-bottom: 10px;}
.pro_list{
width: 95%; margin: 0 auto;}/* 标题部分 */.title{
margin: 30px 0 20px;}/* 产品列表部分 */.pro ul li{
width: 100%; margin-bottom: 30px;}.pro ul li img{
width: 100%;}/* 文字部分 */.titles h3{
margin: 30px 0 10px;}.titles p{
margin-bottom: 10px;}
/* 重置样式 */*{
padding: 0; margin: 0;}li{
list-style: none;}a{
text-decoration: none;}img{
display: block;}

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

转载地址:http://tyogz.baihongyu.com/

你可能感兴趣的文章