Skip to content

响应式设计的屏幕尺寸断点 #171

@Dream4ever

Description

@Dream4ever

资料整理

目前有一些页面需要实现响应式设计(Responsive Design),要在桌面端和移动端分别呈现不同的样式,如果要通过 CSS 来区分,那么就要用到媒体查询(@media)这个功能。

TailwindCSS 将常见的屏幕尺寸分为五类

image

Stack Overflow 上则有一篇帖子专门讨论这个知识点:Media Queries: How to target desktop, tablet, and mobile?

目前在一个业务中,自己只是简单地用屏幕宽度值 640px 来区分桌面端和移动端设备,小于等于它的都认为是移动端设备,否则认为是桌面端设备。

Metadata

Metadata

Assignees

No one assigned

    Labels

    CSSThe world is beautiful

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions