max-width 是目标显示区域的宽度，例如浏览器。
max-device-width 是设备整个显示屏幕的宽度，例如设备屏幕。
类似的还有：max-height and max-device-height 也是同样的道理。
原创文章，作者：犀牛前端部落，如若转载，请注明出处：https://www.pipipi.net/728.html
犀牛前端部落 相关推荐
-
CSS3常见问题：100vh在移动浏览器中不是固定的，恒定的
前言 加载页面时所有浏览器都有一个顶级菜单（例如显示地址栏），当您开始滚动页面时，该菜单会向上滑动。这个时候该菜单会变小，由于100vh仅在视口的可见部分计算，因此会导致所有布局都…
-
如何使用CSS媒体查询检测设备方向
使用CSS检测设备方向的代码如下: @media screen and (orientation:portrait) { … } @media screen and (orient…
-
隐藏页面元素常用方法总结
在页面上隐藏元素的方法有哪些呢？今天俺跟大家整理分享一下常见的方法，如果有不对的地方希望大家一起学习交流。 大致分为占位和不占位，占位的意思就是虽然隐藏但是仍然可以捕获到点击的事件…
-
常见的浏览器内核整理
今天俺跟大家分享一下浏览器内核知识，开发中使用的常见的就是将写CSS的时候加上浏览器内核前缀。 定义 内核主要分为渲染引擎和 JS 引擎。前者负责页面的渲染，后者负责执行解析 Ja…
-
IE6 border出现黑色背景解决办法
在ie6中我们使用border写的三角形会出现黑色的背景，解决办法就是将对应的border-style设置为solid，其他的设置成dashed例：border-color: tr…
-
移动端::-webkit-scroll设置滚动条样式
该滚动条样式一般适用于移动端，PC端一般考虑兼容性会用到类似nicescroll插件。 实现代码如下： /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webki…
-
link和@import引入CSS区别
link和@import引入CSS主要有以下区别： link是HTML标签，@import是css提供的。 link引入的样式页面加载时同时加载，@import引入的样式需等页面加…
-
CSS3：前端三种方法实现页面加载时动画效果
方法 一: 如果你想寻找一种自己调用的方法，可以选用CSS animation。 CSS #test p { margin-top: 25px; font-size: 21px; …
-
CSS3：如何设置一个元素的宽度等于100% 减去50px？
我们可以使用CSS3的calc方法， 而不需要去使用IE的expression。 代码如下： div { width: 100%; width: -webkit-calc(100%…
-
圣杯布局和双飞翼布局详解与实现
作用 圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 区别 圣杯布局，为了中间div内容不被遮挡，将中间div设置…
