基于Springboot的响应式布局

说明

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就可以在不同的设备上运行 ，人们不再仅仅是通过个人电脑来访问网页，还可以使用智能手机或者平板电脑来访问网页，使得网站的可移植性高。

步骤

1.到官网https://v3.bootcss.com/getting-started/#download下载用于生产环境的 Bootstrap文件
2.将文件添加到项目中，结构如下：

3.设置网页的宽度自动适应手机屏幕的宽度，将user-scalable设置为yes，为no时则该页面无法使用响应式布局，其他属性说明：

width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例

<meta
        name="viewport"
        content="width=device-width, initial-scale=0.6, maximum-scale=4.0, minimum-scale=0.6, user-scalable=yes"
/>

4.在jsp页面引入文件，例如标签引入css文件、

5.引入文件后，能将页面的大部分内容改成响应式页面，但是具体页面还有具体改动的地方，这时可以在jsp页面中加入

@media 查询可以针对不同的媒体类型定义不同的样式，可以针对不同的屏幕尺寸设置不同的样式。max-width属性表示适用于小于等于该属性值的屏幕，min-width属性表示适用于大于等于该属性值的屏幕。

/* 小屏幕（320px到768px之间） */
@media screen and (max-width: 768px) and (min-width: 320px){
    .chapter-wrap{
        overflow: auto;
    }
}

6.另外需注意样式的优先级问题：!important>行内样式>id选择器>类选择器>外部样式表