浅谈响应式网站

williamQian2年前 (2022-09-30)ElasticSearch2900

> 最近在做官网，使用了响应式技术，这样可以让官网兼容不同分辨率的设备。这里总结一下媒体查询断点使用的经验。

### 一、tailwindcss的媒体查询介绍
我现在用的css框架是tailwindcss，这是一个非常灵活的css框架，包含预定义的细粒度工具类，同时也可以很方便地对其自定义。框架默认内置了以下媒体查询断点：

| 断点前缀 (breakpoint prefix)  | 最小宽度 (min-width)  | 对应的css代码  |
| ------------ | ------------ | ------------ |
| sm  | 640px  |  @media (min-width: 640px) { ... } |
| md  |  768px | @media (min-width: 768px) { ... }  |
| lg  | 1024px  | @media (min-width: 1024px) { ... }  |
| xl  | 1280px  | @media (min-width: 1280px) { ... }  |
| 2xl  | 1536px  | @media (min-width: 1536px) { ... }  |

如果不写前缀，默认是对所有设备生效，为了方便叙述，我们把视口宽度定义为viewport，例如：
```html



```
如果加上前缀，就会在viewport>=min-width时，应用后面的class
```html



```
多个断点的情况：
```html



```

未完待续...

扫描二维码推送至手机访问。

本文链接：http://blog.bigfoot.xin/post/18.html

分享给朋友：

返回列表

上一篇：Linux环境安装ElasticSearch以及中文分词器

没有最新的文章了...

日暮酒醒

大家都在搜

浅谈响应式网站

发表评论

Powered By Z-BlogPHP. Theme by TOYEAN.

日暮酒醒

大家都在搜

浅谈响应式网站

发表评论取消回复

Powered By Z-BlogPHP. Theme by TOYEAN.

发表评论