相应式布局和媒体查询是不分家的
写在<style></style>标签里面
/*只有在打印机或打印预览的时候才会应用的样式
没有任何的优先级，只有执行顺序的问题*/
@media print{
h1{
background:transparent;
}
}
/*只有在屏幕上才应用的样式，是最常用的*/
@ screen{
h1{
font-family:”翩翩体-简”;
}
}
/*所有的设备都会使用的样式*/
@media all{
h1{
color:red;
}
}
/*检测到视口的宽度为800px时，才会应用如下样式*/
@media (width:800px){
h1{
background-color:green;
}
}
/*检测到视口宽度小于等于700px时，应用如下样式*/
@media(max-width:700px){
h1{
background-color:orange;
}
}
/*检测到视口的宽度大于等于900px时，应用如下样式 */
@media (min-width:900px) {
h1{
background-color:skyblue;
}
}
/*后面写的样式会覆盖前面写的样式*/
@media(height:800px){
h1{
background-color:yellow;
}
}
/*检测到屏幕宽度等于1536时，应用如下样式*/
@media(device-width:1536px){
h1{
color:white;
}
}
在媒体查询中也可以用“且”和“或”运算符
且运算符
@media (min-width:700px) and (max-width:800px)
@media screen and (min-width:700px) and (max-width:800px)
或运算符
@media(max-width:700px),(min-width:800px){
h1{
background-color:orange;
}
}
@media(max-width:700px) or (min-width:800px){
h1{
background-color:orange;
}
}
/*否定运算符*/
@media not screen{
h1{
background-color:orange;
}
}
/*肯定运算符*/
@media only screen and (width:800px){
h1{}
}
响应式布局常用阈值可以分为：
超小屏幕 小于 768px
中等屏幕 768px 到 992px
大屏幕 992px 到 1200px
超大屏幕 大于1200px
媒体查询也可以写为
<link rel=”stylesheet” media=”screen and(min-width:1200px)” href=”./css/huge.css”>
相应式布局结合外部样式的写法
用法一
<link rel="stylesheet”media="具体的媒体查询” href="mystylesheet.css”>
用法二
@media screen and (max-width;768px) {
/*CSS -Code*/
}
@media screen and (min-width:768px) and (max-width:1200px) {
/*CSS-Code;*/
}
![[2024区块链开发入门指引] - 比特币运行原理](http://pic.xiahunao.cn/[2024区块链开发入门指引] - 比特币运行原理)
)
)
