Tailwind Responsive

关键词：响应式设计

首先需要区分下响应式与自适应之间的区别

• 自适应：一套模板适应所有终端，每种设备上看到的版式都是一样的，俗称宽度自适应。
• 响应式：一套模板适应所有终端，但每种设备看到的版式可以是不一样的。

虽然响应式或自适应设计带来设备兼容、工作量大、代码累赘、加载时间长的缺点，但跨平台和终端能“一次设计普遍适用”。可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局，它们不只是技术的实现，更多的是对于设计的全新思维模式。

自适应暴露出的问题是如果屏幕太小，即使网页能过够根据屏幕大小进行适配，在小屏幕上查看内容会过于拥挤，因此响应式设计正是为了解决这个问题而衍生出来的概念。

响应式设计可以自动识别屏幕宽度，并作出相应调整的网页设计，布局和展示的内容可能会有所变动。

配置响应式设计

设置meta标签

设置视口viewport参数

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

视口参数	描述
width=device-width	视口宽度等于当前设备的宽度
initial-scale=1.0	视口初始的缩放比例，默认的1。
minimum-scale=1.0	视口允许用户缩放到的最小比例，默认为1。
maximum-scale=1.0	视口允许用户缩放到的最大比例，默认为1。
user-scalable=no	设置用户是否可以手动缩放，默认为no，禁止用户缩放页面。

设置CSS媒体查询

CSS3提供的媒体查询是响应式设计实现的关键因素，使用媒体查询特性，根据设备宽度让页面应用不同的CSS模块。

@media media_type and|not|only (media_feature){
  css-code;
}

设计响应式页面时，使用@media媒体查询，可针对不同的媒体类型（media type）定义不同的CSS样式，即@media可以针对不同屏幕尺寸设置不同的CSS样式。当重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。

媒体类型media type

媒体类型	描述
all	用于所有设备
print	用于打印机和打印机预览
screen	用于电脑屏幕、平板电脑、智能手机等
speech	用于屏幕阅读器等发声设备

媒体特性media feature

媒体特性	描述
aspect-ratio	定义输出设备中页面可见区域宽高比
color	定义输出设备每组彩色原件的个数，若非彩色设备则值为0。
color-index	定义在输出设备的彩色查询表中的条目数量，若没有使用彩色查询表则值为0。
device-aspect-ratio	定义输出设备屏幕可见宽度和高度的比率
device-height	定义输出设备屏幕可见高度
device-width	定义输出设备屏幕可见宽度
grid	查询输出设备是否使用栅格或点阵
height	定义输出设备中页面可见区域高度
width	定义输出设备中页面可见区域宽度
monochrome	定义单色框架缓冲区中每个像素包含的单色原件个数，若非单色设备则值为0。
orientation	定义输出设备中页面可见区域高度是否大于或等于宽度
resolution	定义设备的分辨率，如96dpi、300dpi、118dpi
scan	定义电视类设备的扫描工序
max-aspect-ratio	定义输出设备屏幕可见宽度和高度的最大比率
max-color	定义输出设备每组彩色原件的最大个数
max-color-index	定义在输出设备的彩色查询表中的最大条目数
max-device-aspect-ratio	定义输出设备屏幕最大可见宽高比
max-device-height	定义输出设备屏幕可见的最大宽度
max-device-width	定义输出设备屏幕可见的最大高度
max-height	定义输出设备中页面最大可见区域高度
max-width	定义输出设备中页面最大可见区域宽度
max-monochrome	定义单色框架缓冲区中每个像素包含的最大单色原件个数
max-resolution	定义输出设备最大分辨率
...	...

百分比布局

响应式页面设计、字体、图片的处理

Tailwind响应式设计

Tailwind中每个实用程序类都可以有条件地应用于不同媒体查询的断点breakpoint，以实现在不离开HTML的情况下构建复杂的响应式界面。

默认情况下，常见设备分辨率的四个断点划分

断点	全程	最小宽度	描述
sm	small	min-width:640px	小型屏幕
md	medium	min-width:768px	中等屏幕
lg	large	min-width:1024px	大型屏幕
xl	extra large	min-width:1280px	超大屏幕

当需要为某个断点breakpoint添加对应工具类时，只需要在工具类前添加断点名称并添加上:冒号，即使用断点:工具类格式。

例如：默认宽度w-16，在中等屏幕md宽度为w-32，在大型屏幕lg宽度显示为w-48。

<img class="w-16 md:w-32 lg:w-48" src="..."/>

这种方式适用于框架中每个工具类，意味着可以在给定断点处更改任何内容，甚至可以更改字母间距或光标样式。

例如：营销页面组件，在小屏幕上使用堆叠布局，大屏幕上使用并排布局。

源代码地址：https://codepen.io/junchow/pen/VwePpvw?editors=1000

demo

<div class="p-4 bg-white border shadow rounded md:flex flex-row items-center justify-start">
  <div class="md:flex-shrink-0">
    <img src="http://source.unsplash.com/200x200" class="md:w-24 sm:w-full rounded">
  </div>
  <div class="mt-4 md:mt-0 md:ml-4">
    <div class="text-sm text-blue-500 font-bold tracking-wide">分类名称</div>
    <a href="" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">标题文本</a>
    <p class="mt-2 text-gray-600">内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分</p>
  </div>
</div>

默认情况下，外部容器默认display:block，通过添加md:flex后在中等屏幕和大型屏幕会转化为display:flex。

当父容器是弹性盒子容器时，为了确保图像不会收缩，可添加md:flex-shrink-0以防止在中等屏幕和大型屏幕上收缩。从技术上来说，可以只使用flex-shrink-0因为它在小型屏幕上不起作用，但由于只在md屏幕上起作用，所以最好在类名中添加md以明确指定。当在小型屏幕上图像默认为全宽，在中等屏幕以上可使用md:w-{amount}将宽度限制为固定长度。在小型屏幕上内容部分使用mt-4在内容和图像之间添加外边距。而在水平布局中不需要此边距，因此使用md:mt-0撤销外边距。

移动优先

默认情况下Tailwind使用移动优先断点系统，类似Bootstrap或Foundation。也就是说未添加断点的工具类在所有屏幕上都会生效，而添加断点前缀的仅仅会在指定的断点以及更高尺寸上生效。

例如：在不同断点处循环使用多个背景色

<div class="mt-4 p-12 bg-gray-500 sm:bg-green-500 md:bg-blue-500 lg:bg-red-500 xl:bg-purple-500"></div>