如何针对桌面、平板和移动?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (10)
  • 关注 (0)
  • 查看 (73)

我一直在对媒体查询进行一些研究,但我仍然不太明白如何针对特定大小的设备。

我希望能够瞄准桌面、平板电脑和移动设备。我知道会有一些差异,但最好有一个通用的系统,可以用来瞄准这些设备。

我发现了一些例子:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

或:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

你认为每个设备的“断点”应该是什么?

提问于
用户回答回答于
  1. 额外的小型设备(电话,最高480 px)
  2. 小型设备(平板电脑,768 px及以上)
  3. 中型设备(大型平板电脑、笔记本电脑和台式机、992 px及以上)
  4. 大型设备(大型台式机,1200 px及以上)
  5. 肖像电子阅读器(Nook/kindle),小型平板电脑.最小宽度:481 px
  6. 肖像平板电脑,肖像ipad,景观电子阅读器.最小宽度:641 px
  7. 平板电脑,景观ipad,lo-res笔记本电脑.最小宽度:961 px
  8. htc一设备-宽度:360 px设备-高度:640 px-webkit-设备-像素比:3
  9. 三星Galaxy S2设备-宽度:320 px设备-高度:534 px-webkit-设备-像素比:1.5(min-moz-设备-像素比:1.5),(-o-min-设备-像素比:3/2),(min-设备-像素比:1.5)
  10. 三星Galaxy S3设备-宽度:320 px设备-高度:640 px-webkit-设备-像素比:2(min-moz-设备-像素比:2),-旧Firefox浏览器(在Firefox 16之前)-
  11. 三星Galaxy S4设备-宽度:320 px设备-高度:640 px-webkit-设备-像素比:3
  12. lg Nexus 4设备-宽度:384 px设备-高度:592 px-webkit-设备-像素比:2
  13. 华硕Nexus 7设备-宽度:601 px设备-高度:906 px-webkit-min-设备-像素比:1.331和(-webkit-max-设备-像素比:1.332)
  14. ipad 1和2,ipad迷你设备-宽度:768 px设备-高度:1024 px-webkit-设备-像素比:1
  15. ipad 3和4设备-宽度:768 px设备-高度:1024 px-webkit-设备-像素比:2)
  16. iphone 3g设备-宽度:320 px设备-高度:480 px-webkit-设备-像素比:1)
  17. iphone 4设备-宽度:320 px设备-高度:480 px-webkit-设备-像素比:2)
  18. iphone 5设备-宽度:320 px设备-高度:568 px-webkit-设备-像素比:2)

热门问答

腾讯云 COS 怎么才能外链调用 m3u8 到别的网站播放?

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
设置公有读私有写:当访问对象时,COS 读取到对象的权限为公有读,此时无论存储桶为何种权限,对象都可以被直接下载 设置步骤 登录 对象存储控制台,选择左侧菜单栏【存储桶列表】,进入存储桶列表页面。单击需要修改对象权限的对应存储桶,进入存储桶。 📷 找到需要设置权限的对象(如 e...... 展开详请

Ubuntu搭建的WordPress如何修改php.ini?

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
php新手很多不知道怎么查配置文件在哪,这里提供一个很简单的方法 使用 php -i 命令可以打印php的详细信息,可以把这堆东西输出一下 php -i > outputphp.txt,结合 grep 查找命令 php -i| grep php.ini 打印结果如下 Config...... 展开详请

归档存储采用的存储介质是什么, 安全可靠吗?

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
归档存储主要是针对海量、重要且访问频率极低的非结构化数据进行长期的归档保存和备份管理。 在数据安全层面,归档存储提供数据锁定机制,防止数据被修改和删除,保障数据安全。 技术架构: image.png 与对象存储的差异 归档存储 CAS 是一项离线存储服务,不同于在线的对象存储 ...... 展开详请

在按官网手册排错后依然提示1004错误?

看你的代码好像是短信相关的代码,1004错误代表请求包解析失败,通常情况下是由于没有遵守 API 接口说明规范导致的。 建议您通过以下方式定位解决: 首先,要确认发送的请求是否是标准的 json 格式; 第二,检查是否有将单引号当做双引号使用(json 标准应该是双引号); 第...... 展开详请

redis数据库应该怎样连接???

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
实例初始化完成后,连接腾讯云Redis时,需要输入设置的密码。主从版和集群版的连接示例如下 主从版连接示例 主从版支持2种格式 • 格式1,“实例id:密码”的格式类型,例如您的实例id是crs-bkuza6i3,设置的密码是abcd1234,则连接命令如下 redis-cli ...... 展开详请

如何使用holer实现从外网访问本地WEB应用?

Dingda

Dingda · 站长 (已认证)

多一些不为什么的坚持
推荐
解压holer软件 获取holer access key信息: 在holer官网上申请专属的holer access key或者使用开源社区上公开的access key信息。 启动holer服务: Windows系统平台: 打开CMD窗口进入可执行程序所在的目录下,执行命令:...... 展开详请

所属标签

扫码关注云+社区