java web 响应式设备_4-移动Web开发之响应式布局

1 响应式开发

响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

1.1 响应式布局原理

原理：使用媒体查询@media针对不同宽度的设备进行布局和样式的设置，从而达到适配不同设备的目的。

1.2 常见设备屏幕尺寸划分

划分如下，

设备划分

尺寸区间

超小屏幕(手机)

<768px

小屏设备(平板)

>=768px ~ <992px

中等屏幕(桌面显示器)

>=992px ~ <1200px

宽屏设备(大桌面显示器)

>=1200px

1.3 响应式布局容器及其宽度设置

响应式布局容器：响应式需要一个作为布局容器的父级元素，来配合子级元素，利用@media-媒体查询实现变化效果。即：在不同屏幕下，通过媒体查询来改变布局容器的大小，同时改变容器内部子元素的排列方式和大小，从而实现不同尺寸的屏幕下，看到不同的布局页面和样式变化。     平时使用的响应式尺寸可划分为，

超小屏幕(手机，小于768px)：设置宽度为100%

小屏幕(平板，大于等于768px)：设置宽度为750px

中等屏幕(桌面显示器，大于等于992px)：设置宽度为970px

大屏幕(大桌面显示器，大于等于1200px)：设置宽度为1170px PS：使得布局容器稍微小于屏幕宽度，是为了让居中显示，两边稍有留白部分。

1.4 响应式布局入门案例

根据1.3中给定的规则，指定div在不同尺寸屏幕下的显示样式，

1.4.1 结构代码

1.4.2 样式代码

.container {

height: 150px;

background-color: skyblue;

margin: 0 auto;

}

/* 使用媒体查询修改容器在不同屏幕下显示不同效果 */

@media screen and (max-width:767px) {

/* 超小屏幕下，小于等于768px */

.container {

width: 100%;

}

}

@media screen and (min-width:768px) {

/* 小屏幕下，大于等于768px*/

.container {

width: 750px;

}

}

@media screen and (min-width: 992px)