【逆战】CSS中的响应式布局

2021-04-13 07:28

阅读：312

标签：运用网站建设 bsp div red css3 响应式建设 span

一、响应式布局：

在小型网站建设中，有运用一套代码代码来适应不同终端分辨率的需求，优点：节约制作时间、节约制作成本、便于维护等优点。

CSS3利用媒体查询（media queries）即可针对不同的媒体类型定义不同的样式，从而实现响应式布局。也可以针对不同的分辨率设置不同的样式。

　　1024分辨率以上：PC端

　　 1024 ~ 768 : pad pro

　　768 ~ 450 : pad mini , mobile 横屏

　　450分辨率以下： mobile 竖屏

二、media的值以及用法：

1、media值：

　　all：用于所有设备

　　 print：用于打印机和打印预览

　　 screen：用于电脑屏幕，平板电脑，智能手机等。

　　speech：应用于屏幕阅读器等发声设备

2、用法：

A：在style样式表中：

　　　　@media media值 and （分辨率宽度+宽度值）

　　　　　　css样式

　　　　表示在浏览器页面指定宽度内，css的样式

　　　　@media media值 and （分辨率宽度+宽度值） and （分辨率宽度+宽度值）

　　　　　　css样式

　　　　表示在浏览器页面指定宽度和另一指定宽度内，css的样式

B：在外部引入css链接内：

　　注：将需要改变的写入media下的css中，正常样式表中写不需要改变的css样式，这样便于后期维护和减少代码工作量

三：media使用方法如下：

1、style样式表中书写方法

 1 DOCTYPE html>
 2 html>
 3 head>
 4     style>
 5         /* box 盒子大小，默认情况下页面为红色 */
 6         #box{ width:100px; height:100px; background:red;}
 7         /* 当浏览器页面最小大于500px时且页面小于1000px时，页面为蓝色 */
 8         @media all and (min-width:500px) and (max-width:1000px){  
 9         #box{ background:blue;}
10         /* 当浏览器页面最大小于500px时，页面为黄色 */
11         @media all and (max-width:500px){  
12         #box{ background:yellow;}
13     style>
14 head>
15 
16 body>
17     p>这是一段测试文字p>
18     div id="box">div>
19 body>
20 html>

2、外部引入css书写方法：

 1 DOCTYPE html>
 2 html>
 3 head>
 4      /* 当浏览器页面最小大于500px时且页面小于1000px时，页面为蓝色 */
 5     link rel="stylesheet" href="xxx1.css" media="all and (min-width:500px) and (max-width:1000px)">
 6     /* 当浏览器页面最大小于500px时，页面为黄色 */
 7     link rel="stylesheet" href="xxx2.css" media="all and (max-width-width:500px)">
 8     style>
 9         #box{ width:100px; height:100px; background:red;}
10     style>
11 head>
12 
13 body>
14     p>这是一段测试文字p>
15     div id="box">div>
16 body>
17 html>

　　注：link引入的css为正常书写的css文件，只不过是样式需要变化的css的值

四、适配规则：

　　1、先适配手机 -- 过渡到pad -- 过渡到pc （不推荐）

　　2、先适配pc -- 过渡到pad -- 过渡到手机（推荐）

　　3、移动端特殊适配：

　　　　A：@media media值 and （orientation：portion）针对竖屏

　　　　B：@media media值 and （orientation：landscape）针对横屏

【逆战】CSS中的响应式布局

标签：运用网站建设 bsp div red css3 响应式建设 span

原文地址：https://www.cnblogs.com/karl-kidd/p/12388746.html

上一篇：xray安装证书进行http以及https扫描

下一篇：brup安装证书抓取https

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：【逆战】CSS中的响应式布局
文章链接：http://soscw.com/index.php/essay/75098.html

亲，登录后才可以留言！

【逆战】CSS中的响应式布局

评论

热门文章

推荐文章

最新文章

置顶文章