css3的max-width和max-device-width的区别

最新推荐文章于 2025-12-12 11:10:07 发布
原创 最新推荐文章于 2025-12-12 11:10:07 发布 · 105 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #前端 #css #html #javascript

本文讨论了在使用GoDaddy自定义建站时，遇到的CSS3媒体查询（max-width和max-device-width）混淆导致布局问题的解决方法。通过理解这两个属性的区别及如何正确应用，可以确保页面在不同设备上显示正确的样式。

最近帮人 弄的godaddy的自定义建站达人页面，简单的单页面。只是加上两个网站的超链接上去。用pc的手机调试器调试的时候  遇到这个css3两个媒体功能  max-width和max-device-width  弄混淆导致要得效果总不出现

max-width指展示的最大宽度，一般是浏览器窗口宽度。
max-device-width是指所展示使用的设备支持宽度，如一般电脑分辨率1280px，手机设备支持展示宽度(安卓有种宽度如360 ，480)等.

附录: media查询

http://www.runoob.com/cssref/css3-pr-mediaquery.html

珊瑚贝
关注
CSS3: 移动端开发中 max-device-width 与 max-width 的区别
Just Code
07-28 2600
翻译自stackoverflow.com，源地址：http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web   有同学需要开发web页在iphone/android手机上访问，想问max-device-width...
max(min)-device-width和max(min)-width的使用注意事项
eqizhihui的博客
08-25 369
在网页中使用@media做页面适配时，必不可少去使用max(min)-width或者max(min)-device-width，一开始以为这两者没什么区别，所以项目基本用到@media的地方都使用了max(min)-width去限制，但是在页面测试时发现了一个问题：在浏览器执行缩放操作时，原来作用于移动端的样式居然出现在了PC端页面上，这肯定要改啦！PC端：如果使用max(min)-device-width，缩放时不会改变css，如果使用max(min)-width，缩放时就会改变css。
Css min-width max-width 使用方法
51yunOA
04-16 1357
CSS宽度属性为单词width，宽度width包含了两个重要的属性：最大宽度属性max-width和最小宽度属性min-width。最大宽度属性(max-width)用来定义宽度显示的最大值，当拖动浏览器边框使其显示范围大于最大宽度的时候，元素显示最大宽度值定义的宽度。在最大宽度属性值中，可以使用三种属性值，分别为auto值、长度值和百分比值；最小宽度属性(min-width)用来定义宽度显...
max-device-width和max-width的区别
weixin_30600503的博客
02-08 260
比如用媒体查询响应输出@media (max-width: 767px)，用谷歌浏览器手机测试插件显示并无变化，其实关键在于max-device-width和max-width，以下摘抄↓ max-device-width和max-width是有区别的，表现在如下几个方面：1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。2、max-width是目...
css中的max-width
u011337574的专栏
06-01 573
#mian{ max-width:600px; margin:0 auto; } 设置max-width主要是为了应对浏览器处理小窗口的时候的情况。这在移动端非常有用。当设置max-width的时候，浏览器会根据浏览器窗口的大小而自动调整空间的大小，而设置width的时候，如果浏览器的窗口变小，浏览器会出现滚动条。
max(min)-device-width和max(min)-width的区别
spfLinux的博客
12-25 1317
Document tinyScreen,css: body{ background: red; } smallScreen.css: body{ background: green; }当使用min-width和max-width时，css有效果。 ----------------------------------------------------------
CSS3 Media Queries模板:max-width和min-width
denglangcheng82460的博客
12-17 195
CSS3 Media Queries模板 CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足，如果满足就调用相应的样式。打个比方来说，如果你的Web页面在960px的显屏下显示，那么首先会通过CSS3 Media Queries进行查询，看看有没有设置这个条件样式，如果找到相应的，就会采...
HTML5自适应：max-width和min-width
tdtcn的博客
11-26 7140
html5自适应
媒体查询里的min-width 和 max-width
无缺的博客
07-28 5625
本文参考MichelleKlann的Media Queries Demystified: Min-Width and Max-Width 媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的一部分。 媒体查询有两个关键词min-width和max-width, 接触过媒体查询的同学可能会认同我， 这两个关键词很绕；从字面上理解它们可能不那么容易，以至于我每次都需要在脑海里面不断演算，然后小心翼翼地测试效果（大概和写正则表达式的感觉差不多..
详解在table设置max-width和min-width使用
06-12
- 在同时设置 `min-width` 和 `max-width` 时，若 `min-width` 的值大于 `max-width`，则 `min-width` 的值会覆盖 `max-width` 的值[^2]。 - 确保表格的内容不会因宽度限制而溢出，可以通过设置 `overflow` 属性来...
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
08-29
在移动客户端手机页面布局中，我们经常使用phys.width和device-width这两个概念。phys.width是指设备的物理宽度，而device-width是指CSS宽度。我们可以通过document.documentElement.clientWidth获取phys.width，而...
详解在table设置max-width和min-width兼容问题
06-12
### CSS Table `max-width` 和 `min-width` 的兼容性解决方案 在CSS中，为表格元素设置 `max-width` 和 `min-width` 时，需要特别注意不同浏览器的兼容性问题。以下是一个完整的解决方案，确保表格在各种浏览器中的...
max-width与width的区别
08-13
在 CSS 中，`max-width` 和 `width` 是两个用于控制元素宽度的属性，但它们的行为和作用有显著区别： - `width` 属性用于直接设置元素的宽度。当为一个元素指定了 `width` 值时，该元素的宽度会严格遵循这个设定值...
12.8 脚本网页 井字棋
2503_93413701的博客
12-08 276
儿时策略，原汁原味，现已集成到个人APP。
CSS3 分页设计指南
lsx202406的博客
12-07 489
CSS3分页设计是网站和应用程序中不可或缺的一部分。通过本文的介绍，相信您已经掌握了CSS3分页的设计方法和技巧。在实际应用中，可以根据需求调整分页样式，打造出既实用又美观的分页效果。
css样式用flex 布局的时候元素尺寸展示不对
最新发布
Youyzq的博客
12-12 297
摘要：当Flex布局中父元素宽度不足时，子元素默认会因flex-shrink:1而自动收缩。本文通过案例说明如何通过设置flex-shrink:0或使用flex:0 0 164px简写来固定子元素宽度，避免被压缩。同时简要介绍了flex布局的三大核心属性（flex-grow、flex-shrink、flex-basis）及其作用，帮助开发者精准控制Flex子元素尺寸。（148字）
CSS3 过渡
lsx202406的博客
12-07 403
CSS3过渡为网页元素添加了丰富的动态效果，使得网页的交互性和视觉效果得到了极大的提升。通过本文的介绍，相信读者已经对CSS3过渡有了深入的了解。在实际开发中，合理运用CSS3过渡，可以提升网页的视觉效果和用户体验。
DevUI组件库实战：从入门到企业级应用的深度探索，如何快速应用各种组件
2401_86031952的博客
12-11 855
DevUI是华为开源的企业级Angular前端解决方案，提供丰富的UI组件和工程化工具。其表单布局示例展示了垂直表单的实现，包含用户名、密码等字段的实时验证、异步查重及密码一致性检查功能。通过响应式布局和国际化支持，DevUI简化了企业级应用开发，确保高可定制性和一致性设计。
解决组件不能远程搜索的问题
2402_88002942的博客
12-10 441
有一个组件a-select用于在下拉框中选中某个人物，在表单中提交。它的运作方式是其下拉框最初没有数据，需要用户搜索人名，后段会返回模糊搜索的系列数据。例如，前段搜索张建国，后段会返回“张建国”、“张坚果”等；搜索zjg同理；搜索“ll”，返回“bill”、“killra”等。但问题在于，前段此下拉框没有同步显示后段返回的所有数据，而是会严格显示与用户输入字段完全匹配的人名，例如搜索张建国，只显示张建国；搜索zjg则显示不出任何数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值