移动端开发页面布局(3)

最新推荐文章于 2020-06-29 08:56:26 发布

t870235422

最新推荐文章于 2020-06-29 08:56:26 发布

阅读量181

点赞数

分类专栏： HTML/CSS 文章标签：移动端响应式 Bootstrap

本文链接：https://blog.csdn.net/t870235422/article/details/103356511

版权

HTML/CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

移动端开发页面布局-响应式布局

1、响应式布局定义

页面布局会随着屏幕大小变化而发生不同的响应，称为响应式布局。
（1）不需要单独写移动端页面
（2）根据不同设备发生变化

2、原理

通过媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备
分四个档位（手机<768px、平板>=768px&<992px、桌面显示器>=992px&<1200px、大屏桌面显示器>=1200px）
响应式需要一个父级作为布局容器，来配合子元素实现页面变化效果。
原理是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同屏幕下，看到不同的页面布局和样式变化。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .container {
        height: 150px;
        background-color: #fff;
        margin: 0 auto;
    }
    
    @media screen and (max-width: 767px) {
        .container {
            width: 100%;
        }
    }
    
    @media screen and (min-width: 768px) {
        .container {
            width: 750px;
        }
    }
    
    @media screen and (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
</style>

<body>
    <div class="container"></div>
</body>

</html>

3、Bootstrap前端开发框架

Bootstrap是最流行的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。

3.1 使用步骤

1、创建bootstrap文件夹
2、创建HTML骨架结构
3、引入相关样式文件
4、书写内容

3.2 栅格系统

将页面内容分成12等份（.container）
行（row）可以去除父容器作用的15px的边距
xs-extra small: 超小；sm-small; md-medium; lg-large
当列总和少于12时，则不会铺满整个屏幕，会有空白；当总和大于12时，放不下的元素会另起一行排列
每一列默认有左右15px的padding

3.2.1列嵌套

栅格系统内置的栅格系统将内容再次嵌套，嵌套的内容份数还是12等份
列嵌套时最好加row，可以去掉父元素的padding，而且高度自动保持和父元素一致。

<div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6">
			<div class="row">
				<div class="col-sm-6">a</div>	
				<div class="col-sm-6">b</div>	
		</div>		
		<div class="col-lg-3 col-md-4 col-sm-6">2</div>
		<div class="col-lg-3 col-md-4 col-sm-6">3</div>
		<div class="col-lg-3 col-md-4 col-sm-6">4</div>
	</div>
</div>

3.2.2 列偏移

.col-md-offset-份数 可以将列向右侧偏移，实际是增加了margin值

<div class="container">
	<div class="row">
	/*中间间隔6等份*/
		<div class="col-md-offset-3">左侧</div>
		<div class="col-md-offset-3">右侧</div>
	</div>
</div>

3.2.3 列排序

.col-md-push-份数 .col-md-pull-份数

3.2.4 响应式工具

在某些屏幕下展示或隐藏某些内容
.hidden-xs 超小屏下隐藏，其他屏可见
.hidden-sm 小屏。。。
.hidden-md 中屏。。。
.hidden-lg 大屏。。。
展示 visible-xs/sm/md/lg

t870235422

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端开发页面布局(3)

移动端开发页面布局-响应式布局1、响应式布局定义2、原理3、Bootstrap前端开发框架3.1 使用步骤3.2 栅格系统3.2.1列嵌套3.2.2 列偏移3.2.3 列排序3.2.4 响应式工具1、响应式布局定义页面布局会随着屏幕大小变化而发生不同的响应，称为响应式布局。（1）不需要单独写移动端页面（2）根据不同设备发生变化2、原理通过媒体查询针对不同宽度的设备进行布局和样式...
复制链接

扫一扫