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

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

开发者学堂课程【移动 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月前
|
编解码 前端开发 搜索推荐
什么是响应式设计?响应式设计的基本原理是什么?如何实现?
什么是响应式设计?响应式设计的基本原理是什么?如何实现?
803 0
|
28天前
|
编解码 前端开发 UED
|
6月前
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解,通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性调整项目伸缩,order改变排序。在实践中,要关注响应式、代码维护和浏览器兼容性,以优化布局和用户体验。
165 4
|
4月前
|
编解码 前端开发 JavaScript
前端框架与库 - Bootstrap响应式设计
【7月更文挑战第19天】Bootstrap是流行的前端框架,以其响应式设计和组件库闻名。响应式设计确保网站在不同设备上显示良好。关键包括:**网格系统**,基于12列布局,适应屏幕尺寸;和**媒体查询**,用于根据设备特性应用样式。开发者常遇到的问题有:网格列超过12、忽视断点和自定义样式冲突。解决方法涉及正确使用断点类、测试多设备及清晰注释代码。借助官方文档和实践,可有效掌握响应式设计。
82 1
|
6月前
|
移动开发 开发者 HTML5
【专栏】介绍Flexbox和Grid两种现代Web布局技术,它们能帮助开发者创建美观、响应式且兼容性好的界面
【4月更文挑战第27天】本文介绍了Flexbox和Grid两种现代Web布局技术,它们能帮助开发者创建美观、响应式且兼容性好的界面。Flexbox通过主轴和交叉轴实现复杂布局,如垂直居中、响应式和多列布局。Grid布局则利用网格线定义容器和网格项,适用于网格系统和响应式设计。文中以构建响应式Web界面为例,展示了如何结合Flexbox和Grid实现头部、内容区域和底部的布局。
84 5
|
6月前
|
前端开发 开发者 UED
构建响应式网页布局的现代方法
【2月更文挑战第13天】随着移动互联网的兴起,为不同设备设计适配的网页变得至关重要。本文深入探讨了使用Flexbox和Grid两种CSS布局技术构建响应式网页的方法,分析了它们的优劣,并通过实例展示了如何有效地运用这些技术以提升页面的响应性和用户体验。
|
前端开发 JavaScript UED
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
73 0
|
前端开发 容器
前端|响应式布局原理
前端|响应式布局原理
122 0
|
前端开发 开发者 容器
响应式开发-媒体查询扩展
快速学习 响应式开发-媒体查询扩展 |学习笔记
|
移动开发 编解码 前端开发
Bootstrap教程(4)--开发标准的响应式网页
本文目录 1. 背景 2. 创建标准HTML5页面 3. 添加响应式内容 4. 小结
157 0
Bootstrap教程(4)--开发标准的响应式网页