标签：运用 网站建设 bsp div red css3 响应式 建设 span
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>
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的值
四、适配规则：
标签：运用 网站建设 bsp div red css3 响应式 建设 span
原文地址：https://www.cnblogs.com/karl-kidd/p/12388746.html
