利用media属性区分设备

最新推荐文章于 2024-03-29 13:54:09 发布
原创 最新推荐文章于 2024-03-29 13:54:09 发布 · 1.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html

随着手持设备的普及，如何让页面适应不同设备成为挑战。解决方案是使用CSS的media属性，通过HTML的<link>元素或CSS的@media规则，根据设备特性加载不同的样式。例如，当屏幕尺寸小于480px时，应用特定的CSS文件，以实现设备针对性的布局和设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

现在由于手持设备，智能手机大行其道。同一页面很难应用到各种不同大小的设备中，针对不同设备特制页面开销又太大。

解决方式是利用media属性智能识别各种设备，并应用不同的CSS式样。

方案一：

用HTML的<link>元素中的media属性来区分设备：

<link rel="stylesheet" href="xxx.css"  media="screen and (max-device-width: 480px)">
screen 表示用于有屏幕的设备（这样就无法用于打印机， 3D 眼镜，盲文阅读机）， max-device-width 表示屏幕的最大宽度。

因此上述代码表示：如果加载该页面的设备的屏幕小于480像素，就应用xxx.css式样


类似可以创建打印机设备的

最低0.47元/天 解锁文章

200万优质内容无限畅学
CSS 自定义属性的策略指南
Lee的博客
07-06 1027
CSS 自定义属性的策略指南CSS 自定义属性(也称为“CSS 变量”)，在目前所有的现代浏览器中都得到了支持，开发者已经在项目中开始使用，但是它们与预处理器中的变量不同，虽然我已经看到过很多例子，却没有搞清楚他们真正的优势在哪里。自定义属性有很大的潜力可以改变我们编写和组织 CSS 的方式，并且在一定程度上改变 JavaScript 与 UI 组件的调用方式。我并不关心语法和它们的工作方式（为此...
CSS 利用@media screen判断识别手机/PC端浏览器
热门推荐
best_inh的专栏
01-07 1万+
一、写此篇的初衷： 手机用户常可以更换自己手机系统的字体，那么在浏览网页的时候，网页内容字体也都随之变了，于是我想，能不能让自己的网站的字体在手机浏览器中保持不变（使用一款自定义字体）呢；而在PC端浏览器不用处理。 二、功能实现依据： 首先，CSS @media查询中有判断横屏（orientation:landscape）、竖屏（orientation:portrait）的功能，那么分别在电脑、手机浏览器上是否有不同表现呢，如果有，就靠它了。先看如下代码： <style type="text
巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
weixin_30593443的博客
04-09 162
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏，普通屏，平板，手机？知道这些特征，我们web应用的CSS和JavaScript才能同步做相应的操作。在给Mozilla Developer Networks改版设计的过程中，我发现使用CSS媒体查询(media queries)虽然非常的有效，但有时，JavaScript却不能及时知道用户浏览设备的状态。浏览网站的...
media对各种设备的判断
weixin_30617797的博客
04-12 233
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Smartphones (portrait and landscape) */ } @media only screen and (min-width : 321px) { /* ...
css media判断设备设置样式
Andy_lau
01-26 2426
@media (max-width: 768px){ .modal-sm{ width: auto; } } @media (min-width: 768px){ .modal-sm{ width: 500px; } }
@media screen针对不同移动设备-响应式设计
Mary201572的博客
08-05 645
@media screen针对不同移动设备-响应式设计 概念： device-pixel-ratio：定义输入设备屏幕的可视宽度与可见高度比率。 device-width：输入设备屏幕的可视宽度。 orientation ：屏幕横竖屏定向。landscape 是横向，portrait 是纵向【ipad 相反】   /* iPhone 4 ———– */ @me
@media 判断iphone/ipad 各种机型
dear_zx的博客
09-20 3758
兼容iphone4/4s： @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } 兼容iphone5 ： @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){ } 兼容iphone6，iphone7，iphone...
电信设备-一种基于LINUX系统区分本地磁盘与USB移动磁盘的方法.zip
09-14
USB设备的属性中通常会有USB类信息，比如Mass Storage Class，这有助于区分它们。 4. **利用文件系统类型**：本地磁盘和USB磁盘可能使用不同的文件系统。例如，本地磁盘可能使用EXT4，而USB设备可能格式化为FAT32或...
前端如何区分是电脑F12切换移动设备模式还是在真实移动设备打开网页
最新发布
06-26
如果只是为了调整布局，那么使用响应式设计而不区分设备类型更好。如果必须区分，则建议采用多种特征综合判断，并允许用户手动切换。引用[1]中提到了使用User-Agent检测设备类型，但我们现在知道它不可靠。因此，...
@media screen 针对不同移动设备
weixin_34253539的博客
04-14 154
2019独角兽企业重金招聘Python工程师标准>>> ...
如何通过css的media属性，适配不同分辨率的终端设备?
sidongxue2的专栏
06-29 2771
如何通过css的media属性，适配不同分辨率的终端设备，示例如下:<!DOCTYPE html> <html> <head> <title>首页</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="keywords" content=
media节点
linken_yue的博客
10-24 538
camera
如何用CSS判断手机、平板、PC终端？
阿酷tony
09-03 8407
<style> /*手机*/ @media screen and (max-width:600px){ .box_2 { padding-top: 45px; padding-bottom: 50px; /* background: #fff; */ /* 添加背景图片 */ b.
【css】媒体查询（总结）
前端学习博客
03-27 3409
【css】媒体查询 文章目录【css】媒体查询媒体查询：一、认识viewport二、关于三个viewport的理论layout viewport（布局视口）visual viewport（视觉视口）ideal viewport（理想视口）三、利用meta标签对viewport进行控制widthJS延迟四、媒体设备stylelink@import@media多设备支持五、查询条件设备方向逻辑与逻辑或不应用only六、面试题：对媒体查询的理解？七、面试题：响应式设计的概念及基本响应式 媒体查询： Media
【鸿蒙HarmonyOS开发笔记】使用媒体查询（mediaquery）实现不同设备响应式布局
温的打怪之旅
03-29 1488
/屏幕大小尺寸//保存进AppStorage的字段//媒体查询条件。
CSS的媒体属性media-实用篇(长期更新)
Bennett_G博客
05-02 3336
CSS的媒体属性之media前言✨ 腾讯视频✨ 更新中... 💖💖💖大家如果有其它方案，也可以随时补充💖💖💖 前言 👉👉👉 作为前端程序员，大家一定经历过web端页面实现一定程度的自适应需求。当然目前已经有一些比较成熟的解决方案：px2rem等.... 此文并不会在这上面过多赘述，仅是搜集一些与media属性有关的，用以参考，可以思考一下为什么设置的这样的临界值? ✨ 腾讯视频 @media (max-width:1789px){ body{min-width:1580px} } @
CSS媒体查询（media）详解
qq_45859670的博客
03-08 1219
适配不同设备，对应不同的css 默认为 media=“all” <!-- 正常屏幕 --> <style media="screen"> </style> <!-- 打印机屏幕 --> <style media="print"> </style> 外部导入css <link rel="stylesheet" href="screen.css" media="scr
CSS媒体查询（@media）全面解析
大雾起了清晨
05-01 9331
使用 @media 或 @import 规则在样式表中指定对应的设备类型；用 media 属性在 、、 或其他 HTML 元素中指定特定的设备类型。1) @media在《CSS @规则》一节中我们已经简单了解 @media，使用 @media 您可以指定一组媒体查询和一个 CSS 样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的 CSS 样式才会应用于文档。/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */body {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值