移动端-屏幕适配/媒体查询

最新推荐文章于 2024-04-10 22:22:43 发布

小仙女中的穷逼

最新推荐文章于 2024-04-10 22:22:43 发布

阅读量1.8k

点赞数

分类专栏：移动端文章标签：移动适配 rem

本文链接：https://blog.csdn.net/weixin_43622452/article/details/86776229

版权

移动端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

屏幕适配

移动页面最理想的状态是，避免滚动条且不被默认缩放处理，我们可以通过设置来进行控制，并改变浏览器默认的视口的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <!-- 设置视口大小 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
</head>
<body>
    <!--
		通过设置属性content=""实现，中间以逗号分隔
    	width 设置layout viewport 宽度，其取值可为数值或者device-width。
    	height 设置layout viewport 高度，其取值可为数值或者device-height
        initital-scale设置页面的初始缩放值，为一个数字，可以带小数。
    	maximum-scale允许用户的最大缩放值，为一个数字，可以带小数。
    	minimum-scale允许用户的最小缩放值，为一个数字，可以带小数。
    	注：device-width 和 device-height就是ideal viewport的宽高。
    -->
</body>
</html>

控制缩放

<meta name="viewport" content="width=device-width,
initial-scale=1.0">

适配方案

固定宽度(很少用)
百分比(设置元素高度有局限性)

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百分比单位</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        
        .inner {
            /* 参照父元素的宽度 */
            width: 50%;
            /* 参照父元素的高度 */
            height: 50%;
            /* 参照父元素的宽度 */
            padding-left: 10%;
            /* 参照父元素的宽度 */
            padding-top: 10%;
            /* 参照父元素的宽度 */
            margin-left: 10%;
            /* 参照父元素的宽度 */
            margin-top: 10%;
           /* 不支持百分比 */ 
            border: 10% solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner"></div>
    </div>
</body>
</html>

rem
1.设置viewport
2.设置页面元素宽度单位为rem 或 em

em 相对长度单位，其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小。rem 相对长度单位，其参照根元素(html)字号大小。

100像素

设置网页宽度等于设备物理像素
设置初始化缩放比例（值为1 / window.devicePixelRatio）淘宝针对iphone采用此方案

媒体查询

通过媒体查询可以检测当前网页运行在什么终端，可以有机会实现网页适应不同终端的展示风格。

媒体类型

在这里插入图片描述

媒体特性

在这里插入图片描述

关键词

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and 可以将多个媒体特性连接到一起，相当于“且”的意思。
not 排除某个媒体类型，相当于“非”的意思，可以省略。
only指定某个特定的媒体类型，可以省略。

引入方式

1.link标签引入

<link href="./5-1.css" media="only screen and (max-width: 320px)">

2.css方式

@media only screen and (max-width: 640px) {
    html {
        background-color: pink;
    }
    /* 其它任意样式表 */
}

常用特性

width / height完全等于视口
max-width / max-height 小于等于layout viewport
min-width / min-height 大于等于layout viewport
device-width / device-height 完全等于ideal viewport
orientation: portrait | landscape 肖像/全景模式