通过学习<link>标签见到不一样的媒体查询横竖屏适配方法

最新推荐文章于 2023-04-26 15:18:11 发布

jiameng15

最新推荐文章于 2023-04-26 15:18:11 发布

阅读量890

点赞数

分类专栏：前端技术文章标签：前端 css

本文链接：https://blog.csdn.net/jiameng15/article/details/73468632

版权

前端技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

最近一直在读一本翻译的不怎么样的前端书记，此处暂且不表，看到<link>标签，大家第一时间想到的肯定是CSS样式表：
<link rel="stylesheet" href="css/swiper.min.css">
嗯，再看下去发现<link>中海油很多东西可以放，我得知识是如此的浅薄，直接上干货。

这是一个正常的媒体查询写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style>
        body {
            padding: 0;
            margin: 0
        }

        /* orientation: portrait | landscape */
        /* 横/坚屏 */

        /* 肖像（坚屏）模式 */
        @media only screen and (orientation: portrait) {
            body {
                background-color: blue;
            }
        }

        /* 全景（横屏）模式 */
        @media screen and (orientation: landscape) {
            body {
                background-color: red;
            }
        }
    </style>
</head>
<body>

</body>
</html>

嗯，看到这里你也许会不屑一顾，那么恭喜你，媒体查询已经用的炉火纯青了，接下来是重点，至少对于我来说。

<link>标签中的媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <link rel="stylesheet" media="all and (orientation:portait)" href="prtrt.css">
    <link rel="stylesheet" media="all and (orientation:landscape)" href="lndscp.css">
    <style>
        body {
            padding: 0;
            margin: 0
        }

    </style>
</head>
<body>

</body>
</html>