html响应式布局_媒体查询

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文件中根据不同的尺寸来设置不同的样式

当屏幕的尺寸大于960pxbody的背景颜色 为aqua
@media screen and (min-width: 960px){
    body{
        background-color: aqua;
    }
}

当屏幕的尺寸小于960px并且大于600pxbody的背景颜色 为red
@media screen and (min-width: 600px) and (max-width: 960px){
    body{
        background-color: red;
    }
}

当屏幕的尺寸小于600pxbody的背景颜色 为red
@media screen and (max-width: 600px){
    body{
        background-color: black;
    }
}
早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页