使用@media screen让站点完美适应不同分辨率的设备(移动+PC)

在一些场景下flex布局也不一定全部适用(手机,pc,平板),因而用到了这种方式,针对不同设备进行不同的样式选择,提升用户体验。

创建html文件

使用vs code编辑器,快捷键(!+tab)创建一个html模板
其他编辑器也可把这一段代码复制过去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

创建一个div,并编写style

可以直接复制过去

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="demo">内容</div>
</body>
<style>
    /* 默认div背景颜色为黑色 */
    .demo {
        width: 200px;
        height: 200px;
        background-color: black;
    }
    /* 668px<设备高度<1024px  背景为红色*/
    @media only screen and (min-height: 668px) and (max-height: 1024px){
        .demo {
        width: 200px;
        height: 200px;
        background-color: red;
    }
    }
    /* 1024px<设备高度  背景为青色*/
    @media only screen and (min-height: 1024px){
        .demo {
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
    }
</style>

</html>

总结

min-width 最小宽度
max-width 最大宽度
min-height 最小高度
max-height 最大高度
@media only screen and 这里加对应的条件{
这里就对应的css样式
}
打开浏览器进行观察

按下f12(笔记本为fn+f12)点击 调试器里面的小手机图标,在ipad,iphone x,iphone 8中会展示如下不同的样式

内容版权声明:除非注明,否则皆为SEO博客原创文章。

姜成SEO技术交流群

转载注明出处:https://www.seoblogs.cn/seojc/2018640.html

留个评论,给我继续更新的动力
  • 全部评论(0
    还没有评论,快来抢沙发吧!