移动Web：媒体查询及手机端PC端识别

最新推荐文章于 2023-07-02 10:00:00 发布

孤安先生

最新推荐文章于 2023-07-02 10:00:00 发布

阅读量2.3k

点赞数

分类专栏：全栈开发学习日记 # 第七章：移动Web 文章标签：前端媒体 css

本文链接：https://blog.csdn.net/qq_41952539/article/details/127636785

版权

全栈开发学习日记同时被 2 个专栏收录

78 篇文章 12 订阅

订阅专栏

第七章：移动Web

4 篇文章 0 订阅

订阅专栏

媒体查询

响应式布局的核心，能够检测视口的宽度，然后编写差异化的 css 样式调整网页的布局方式。

响应式布局原理：根据 UI 设计稿需求合理设置响应断点，配合媒体查询书写差异化CSS样式。

响应断点是指媒体查询所采用的视口的宽度。作用：将屏幕尺寸划分成若干的区间。

语法格式

/* 写法一：内嵌式 */
@media 逻辑符 媒体类型 and (媒体特性) {
    执行的 css 代码
}

/* 写法二：外链式 */
<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css" >

/* 视口宽度最小为320px，最大为640px时，呈现样式 */
@media (min-width: 320px) and (max-width: 640px) {
    body {
        background: #f00;
    }
}

/* 视口宽度最小为640px，最大为1024px时，呈现样式 */
@media (min-width: 640px) and (max-width: 1024px) {
    body {
        background: #00f;
    }
}

/* 视口宽度最小为1024px，最大为1600px时，呈现样式 */
@media (min-width: 1024px) and (max-width: 1600px) {
    body {
        background: #0f0;
    }
}

@media 解析过程

浏览器解读代码时，实时对当前设备进行检测

如果条件满足 (表达式结果为 true )，那么久应用这条 @media 规则对应的样式。
如果条件不满足 (表达式结果为 false )，{} 内的CSS就被忽略。

注意事项

@media 样式要放在默认样式的后面，根据css特性，后面的样式会覆盖前面的样式。

若媒体特性使用 min-width 时：媒体查询从小到大书写。
若媒体特性使用 max-width 时：媒体查询从大到小书写。

<html>
    <head>
        <!-- 默认样式 -->
        <link rel="stylesheet" href="css/index.css" />
        <style> 当前默认样式 </style>
        
        <!-- media 样式 -->
        <link rel="stylesheet" media="(min-width: 320px) and (max-width: 640px)" href="css/media.css" />
    </head>
    <body></body>
</html>

媒体类型及特性

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上3种情形

@media screen and (min-width: 1024px) and (max-width: 1600px) {
    body {
        background: #0f0;
    }
}

特性名称	属性	值
视口的宽和高	width、height	数值
视口最大宽或高	max-width、max-height	数值
视口最小宽或高	min-width、min-height	数值
屏幕方向	orientation	portrait: 竖屏 landscape: 横屏

横竖屏

/* 横屏 */
@media (orientation: landscape) {
    h1::before {
        content: '现在是横屏状态';
        color: #f00;
    }
}

/* 竖屏*/
@media (orientation: portrait) {
    h1::before {
        content: '现在是竖屏状态';
        color: #00f;
    }
}

20210508101606129
20210507180317809
20210507180340495

@media (resolution: 2dppx) {
    h1::after {
        content: '2倍屏';
        color: #f00;
    }
}

@media (resolution: 3dppx) {
    h1::after {
        content: '3倍屏';
        color: #00f;
    }
}

20210508103328926

20210508103435438

手机端和PC端识别

判断是否为移动端

通过正则判断是否为移动端

function idApp () {
    // 是否是苹果
    if (/iphone/i.test(navigator.userAgent)) {
        return true;
    }
    
   	// 是否是安卓
    if (/android/i.test(navigator.userAgent)) {
        return true;
    }
    
    // 是否是 windows phone
    if (/windows phone/i.test(navigator.userAgent)) {
        return true;
    }
    
    return false;
}

// 如果是移动端就跳转到移动端页面
if (isApp()) {
    location.href = 'https://m.js.com/';
} else {	// 否则就跳转到PC端页面
    location.href = 'https://www.js.com/';
}

孤安先生

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动Web：媒体查询及手机端PC端识别

响应式布局的核心，能够检测视口的宽度，然后编写差异化的 css 样式调整网页的布局方式。响应断点是指媒体查询所采用的视口的宽度。作用：将屏幕尺寸划分成若干的区间。浏览器解读代码时，实时对当前设备进行检测。通过正则判断是否为移动端。
复制链接

扫一扫