我在项目中使用的最佳CSS断点值
在设计站点时,我注意到我为CSS断点使用了一些非常随机的值。有时会四舍五入,例如800或1200,有时是直到像素的特定值,例如672。
我搜索了适用于以后的断点的适当值。
我花了一点时间查一下,得出了这个结论。
我们有5种主要的设备尺寸需要担心:
- 手机人像
- 移动景观
- 平板电脑肖像
- 平板电脑风景
- 笔记本电脑
这些设备映射到这些像素值:
- 移动人像:小于640像素
- 移动景观:> 640px
- 平板电脑肖像:> 768像素
- 平板电脑横向:> 1024px
- 笔记本电脑:> 1280像素
我从尾风默认。
我不是设计师,因此我每天都不会参与最佳实践,但是我决定这次是首先设计移动设备。
这意味着我的CSS(无需任何媒体查询)将针对移动肖像用例进行设计,然后添加我将为越来越大的设备设计的断点,从而禁止max-width
来自媒体查询。
我想我总是走相反的路线:设计更大的屏幕(这是我最常使用的屏幕),然后再缩小屏幕,但首先设计移动设备并使用min-width
似乎是当今最被接受和使用的解决方案。
这些是我从现在开始将使用的媒体查询:
@media (min-width: 640px) {
}
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}
免费下载我的CSS手册
更多CSS教程:
- Flexbox指南
- CSS网格教程
- CSS变量(自定义属性)
- PostCSS简介
- CSS保证金属性
- 如何使用CSS将元素居中
- CSS系统字体
- 如何使用样式打印HTML
- CSS过渡入门指南
- CSS动画教程
- CSS简介
- CSS指南
- 如何使用PurgeCSS和PostCSS设置Tailwind
- 尾风备忘单
- 如何使用CSS连续旋转图像
- 使用CSS使表响应
- 如何通过二等分来调试CSS
- CSS选择器
- CSS级联
- CSS特异性
- CSS属性选择器
- CSS颜色
- CSS单位
- CSS url()
- CSS排版
- CSS Box模型
- CSS位置属性
- CSS媒体查询和响应式设计
- CSS功能查询
- CSS转换
- 如何使用CSS设置列表样式
- CSS供应商前缀
- CSS继承
- CSS伪类
- CSS伪元素
- 用CSS样式化HTML表
- CSS Display属性
- CSS calc()函数
- CSS边框
- 使用@import导入CSS文件
- CSS错误处理
- CSS过滤器
- CSS Box大小
- CSS背景
- CSS注释
- CSS字体
- CSS填充
- CSS float属性和清除
- CSS规范化
- CSS z-index属性
- 如何使用CSS禁用文本选择
- 如何使用CSS将项目放在其容器的底部
- 如何使用CSS反转颜色
- CSS中的响应式前置标签
- 自适应YouTube视频嵌入
- 响应式设计的良好CSS断点值是多少?
- 如何在Flexbox中对齐中心