响应式开发-媒体查询&原理 |学习笔记

简介: 快速学习 响应式开发-媒体查询 &原理

开发者学堂课程【移动 Web 前端开发:】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8438


响应式开发-媒体查询&原理

 

一、媒体查询原理及示例

响应式的原理是什么?

要求:

1. CSS3 中的 Media Query(媒介查询)

2.通过查询 screen 的宽度来指定某个宽度区间的网页布局。

3.超小屏幕(移动设备) 768px以下

4.小屏设备  768px-992px

5.中等屏幕  992px-1200px

6.宽屏设备 1200px以上

示例代码:

//版型容器在切块的时候无法实现自适应

<DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>媒体查询</title>

<style>

body{

margin: 0;

padding: 0;

}

.container{

width: 1200px;

height: 1200px;

background : red;

margin: 0 auto;

} 

/*大屏设备 1200px以上 */

/*版心容器 宽变成1170px  背景颜色 黄色*/ //当前需求 

@media screen and(min-width:1200px){  // media 的作用:媒体查询,媒体查询的种类有很多。

//查询屏幕的最小宽度是1200px

.container{  

//可以编写属性,也可以编写正常的 css 样式

width:1170px;

background:yellow;  

//此代码生效则编写的样式也会生效

}

}

效果展示:

image.png

//通过媒体查询,使得上方样式生效,将下方效果覆盖。媒体查询的意义:在某个宽度区间内,样式生效覆盖掉之前的样式,达到样式修改的目的,通过媒体查询指定某个区间,样式才会生效。

/*中屏设备 992px-1200px; */

/*版心容器 宽变成 970px  背景颜色  绿色 */

@media screen and(min-width:992px) and (max-width:1200px){ //为了避免条件与之前编写的条件所重合,需要添加一个新的条件

.container{

width:970px;

background:green;

}

}

//通过媒体查询指定一个某个屏幕区间来单独设置网页布局和样式。

/*小屏设备 768px-992px */

/*版心容器 宽变成970px 背景颜色 蓝色 */

@media screen and(min-width:768px) and (max-width:992px){

.container{

width:750px;

background:blue;

}

/*超小屏设备 768px以下 */

/*版心容器 宽变成100% 背景颜色 紫色 */

@media screen and(max-width:768px) {

.container{

width:100%;

background:purple;

}

}

//版心容器能够分别自适应大屏设备、中屏设备、小屏设备、超小屏设备,就表示一条页面的版心可以适配多种终端

//完成此需求便达到了通过查询screen的宽度来指定某个宽度区间的网页布局的目的。

//一个容器可以适配多种屏幕,此页面的版心容器能够适配多种终端

/* 媒体查询 */

/*语法:关键字 查询的屏幕 条件为 and 衔接 必须使用空格(条件)

@media screen and(min-width:1200px){

可以写 css 样式  选择器(属性)

</style>

</head>

<body>

<div class =”container”></div> //设置一个固定宽度

</body>

</html>

//通过媒体查询来查询到不同的终端类型,根据不同的终端类型制作不同的网络布局和内容。

什么是响应式布局?(What is respond layout?)

1.在移动互联日益成熟的时候,在桌面浏览器上开发的网页已经无法满足移动设备的阅读

2.通常的做法是针对移动端单独做一套特定的版本

3.如果终端越来越多,那么需要开发的版本将越来越多(大屏移动设备普及)。

4.Ethan Marcotte 在2010年5月提出的概念,一个网站能够兼容多个终端。

响应式布局主要是为了让网页在不同显示设备上以合适的方式显示而出现的一种设计思路。通常来说电脑的显示屏较大,大多都是横屏显示的;手机的显示屏比较小,通常都是竖屏使用的。如果只有一套UI显示的话体验上往往难以兼顾两者,这时可以使用响应式布局。对于小型的网页项目,目前常见的响应式布局通常是利用 媒体查询 结合 meta 标签的 viewport 属性 来实现.

@media 查询条件 {

CSS-Code;

}

/* 查询条件可以是媒体类型或是媒体特性 */

/* 也可以是由 and、not、only、or 修饰组合而成的短语 */

/* 多个条件也可以用 ,(逗号)连接,相当于 or */

/* 媒体特性需要用圆括号包围 */

相关文章
|
6月前
|
前端开发 JavaScript 开发工具
响应式设计的原理与实践
响应式设计的原理与实践
52 1
|
19天前
|
编解码 JavaScript 前端开发
在跨平台虚拟 DOM 框架中处理动画效果
【10月更文挑战第25天】在跨平台虚拟 DOM 框架中处理动画效果需要综合运用多种技术和方法,充分考虑不同平台的特点和性能要求,通过合理的设计和优化,实现高效、流畅且具有良好兼容性的动画效果,从而为用户提供更加丰富和生动的交互体验。
101 63
|
1月前
|
编解码 前端开发 UED
|
6月前
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解,通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性调整项目伸缩,order改变排序。在实践中,要关注响应式、代码维护和浏览器兼容性,以优化布局和用户体验。
167 4
|
6月前
|
移动开发 开发者 HTML5
【专栏】介绍Flexbox和Grid两种现代Web布局技术,它们能帮助开发者创建美观、响应式且兼容性好的界面
【4月更文挑战第27天】本文介绍了Flexbox和Grid两种现代Web布局技术,它们能帮助开发者创建美观、响应式且兼容性好的界面。Flexbox通过主轴和交叉轴实现复杂布局,如垂直居中、响应式和多列布局。Grid布局则利用网格线定义容器和网格项,适用于网格系统和响应式设计。文中以构建响应式Web界面为例,展示了如何结合Flexbox和Grid实现头部、内容区域和底部的布局。
87 5
|
6月前
|
前端开发 开发者 UED
构建响应式网页布局的现代方法
【2月更文挑战第13天】随着移动互联网的兴起,为不同设备设计适配的网页变得至关重要。本文深入探讨了使用Flexbox和Grid两种CSS布局技术构建响应式网页的方法,分析了它们的优劣,并通过实例展示了如何有效地运用这些技术以提升页面的响应性和用户体验。
|
前端开发 UED
响应式Web设计的原理与实践
响应式Web设计的原理与实践
109 0
|
前端开发 容器
前端|响应式布局原理
前端|响应式布局原理
122 0
|
JavaScript C++
【Vue 开发实战】实战篇 # 30:实现一个可动态改变的页面布局
【Vue 开发实战】实战篇 # 30:实现一个可动态改变的页面布局
432 0
【Vue 开发实战】实战篇 # 30:实现一个可动态改变的页面布局
|
前端开发 开发者 容器
响应式开发-媒体查询扩展
快速学习 响应式开发-媒体查询扩展 |学习笔记