html响应式布局_媒体查询
16lz
2021-01-22
html响应式布局_媒体查询
1 在html页面中根据不同的屏幕尺寸引入不同的css样式文件
<link href="styl1.css" type="text/css" rel="stylesheet" media="only screen and (max-width:600px)" >
2 响应式布局方式初始化
<meta name="viewport" content="width=divice-width,initial-scale=1" >
指定屏幕的宽度为设备的宽度,并且设置缩放比例为1倍
3 在css文件中根据不同的尺寸来设置不同的样式
当屏幕的尺寸大于960px时 body的背景颜色 为aqua
@media screen and (min-width: 960px){
body{
background-color: aqua;
}
}
当屏幕的尺寸小于960px并且大于600px时 body的背景颜色 为red
@media screen and (min-width: 600px) and (max-width: 960px){
body{
background-color: red;
}
}
当屏幕的尺寸小于600px时 body的背景颜色 为red
@media screen and (max-width: 600px){
body{
background-color: black;
}
}
更多相关文章
- TextView显示html样式的文字
- 怎么动态设置html的canvas元素的尺寸?
- 样式通常以相同的组合出现:创建单个类还是组合元素?
- 单选按钮和多选按钮的样式设置
- 工作中遇到的几个CSS样式表的问题
- php 把驼峰样式的字符串转换成下划线样式的字符串
- 来自php表单的样式电子邮件
- 当页面上有多个按钮时,按钮样式在页面加载上有厚的边框
- 为什么通过JavaScript更改样式会受到CSS过渡的影响