zhanghao 2020-03-01
1、style样式表中书写方法
<!DOCTYPE html> <html> <head> <style> /* box 盒子大小,默认情况下页面为红色 */ #box{ width:100px; height:100px; background:red;} /* 当浏览器页面最小大于500px时且页面小于1000px时,页面为蓝色 */ @media all and (min-width:500px) and (max-width:1000px){ #box{ background:blue;} /* 当浏览器页面最大小于500px时,页面为黄色 */ @media all and (max-width:500px){ #box{ background:yellow;} </style> </head> <body> <p>这是一段测试文字</p> <div id="box"></div> </body> </html>
<!DOCTYPE html> <html> <head> /* 当浏览器页面最小大于500px时且页面小于1000px时,页面为蓝色 */ <link rel="stylesheet" href="xxx1.css" media="all and (min-width:500px) and (max-width:1000px)"> /* 当浏览器页面最大小于500px时,页面为黄色 */ <link rel="stylesheet" href="xxx2.css" media="all and (max-width-width:500px)"> <style> #box{ width:100px; height:100px; background:red;} </style> </head> <body> <p>这是一段测试文字</p> <div id="box"></div> </body> </html>
注:link引入的css为正常书写的css文件,只不过是样式需要变化的css的值
四、适配规则:
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT