简体繁体 English

根据设备更改 div 的宽度

[英]Change the width of a div depending on the device

原文 2021-03-04 19:58:39 1 2 javascript/ html/ css/ width/ responsive

I would like to use css to add an effect so that a div has a width of 500px but only if the user is on a computer.我想使用 css 添加效果，使 div 的宽度为 500px，但前提是用户在计算机上。 If the user is on a mobile phone, tablet, iPad etc, it would have the predefined width.如果用户使用的是手机、平板电脑、iPad 等，它将具有预定义的宽度。 How would I accomplish this?我将如何做到这一点？

2 个解决方案

You are looking for media query, read more about it here .您正在寻找媒体查询，请在此处阅读更多信息。 If you are curious knowing different view widths, you can refer to this:-如果您想知道不同的视图宽度，可以参考：-

320px — 480px: Mobile devices 320px — 480px：移动设备
481px — 768px: iPads, Tablets 481 像素 — 768 像素：iPad、平板电脑
769px — 1024px: Small screens, laptops 769px — 1024px：小屏幕、笔记本电脑
1025px — 1200px: Desktops, large screens 1025px — 1200px：台式机、大屏幕
1201px and more — Extra large screens, TV 1201px 及以上 — 超大屏幕、电视

OR或者

You can use responsive units to set widths, like 100% or 100vw , know more about responsive units here .您可以使用响应式单位来设置宽度，例如100%或100vw ，在此处了解有关响应式单位的更多信息。

Check this question if you want to detect device but anyway you would need media query.如果您想检测设备，请检查此问题，但无论如何您都需要媒体查询。 What is the best way to detect a mobile device? 检测移动设备的最佳方法是什么？