移动 WEB 开发的布局方式 ---- 响应式布局
一、响应式简介
一个页面布局兼容了 PC端 ，iPad端 和 移动端
所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型
- 特点：
- 响应式布局是不需要单独写移动端页面的
- 响应不同的设备来发生变化的
二、 响应式开发原理
三、响应式布局容器
栗子：
<style>
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 1. 超小屏幕下 小于768 布局容器的宽度设置为 100% */
@media screen and (max-width:767px){
.container{
width: 100%;
}
}
/* 2.小屏幕下 大于等于 768 布局容器大小设置为 750px */
/* (为什么要小一点呢，布局起来左右两边有空隙，好看！！) */
@media screen and (min-width:768px){
.container{
width: 750px;
}
}
/* 3. 中等屏幕下 大于等于 992px 布局容器的大小设置为 970px */
@media screen and (min-width:992){
.container{
width: 970px;
}
}
/* 4. 大屏幕下 大于等于1200 布局容器修改为 1170px */
@media screen and (min-width:1200){
.container{
width: 1170px;
}
}
</style>
<body>
<!-- 响应式布局首先要有一个布局容器 -->
<div class="container"></div>
</body>
四、响应式导航案例
栗子：
<style>
*{
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.contanier {
width: 750px;
margin: 0 auto;
}
.contanier ul li {
float: left;
width: 93.75px;
height: 30px;
background-color: deeppink;
}
@media screen and (max-width:767px){
.contanier {
width: 100%;
}
.contanier ul li{
width: 33.33%;
}
}
</style>
<body>
<div class="contanier">
<ul>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
</ul>
</div>
</body>
移动 WEB 开发的布局方式 ---- 响应式布局的更多相关文章
- html响应式布局，css响应式布局，响应式布局入门
html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...
- 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
- rem布局及响应式布局
流式布局(100%布局)(可能:做的页面不是很美观)效果与弹性布局一样 不设置宽高:表示宽 auto 最外层:保证100% 等比例缩放的算法: 320/10 已知的一个比例 = 已知的宽/x ...
- 自适应布局，响应式布局以及rem,em区别
一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...
- Bootstrap页面布局5 - 响应式布局(格式)
旨在优化不同上网设备中页面显示的优化 响应式布局:就是根据浏览窗口的尺寸,改变页面的变化 原理:利用css的media-queries判断浏览窗口的尺寸,在CSS样式表中设置一些规则! 例如: 在&l ...
- [学习笔记]viewport定义，弹性布局，响应式布局
一,移动端宽度设置viewport视图窗口,<meta name="viewport" content="width=device-width,initial-sc ...
- viewport定义，弹性布局，响应式布局及LESS和SASS框架应用
一,移动端宽度设置 viewport视图窗口,<meta name="viewport" content="width=device-width,initial-s ...
- 浅谈静态布局、流式布局，rem布局，弹性布局、响应式布局
静态布局: 特点:没有兼容性问题 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分:移动设备:另外建立移动网站,单独 ...
- css布局－响应式布局
响应式设计 .在不同设备上正常使用 .一般主要处理屏幕大小问题 .主要方法: .隐藏 + 折行 + 自适应空间 .rem/viewport/media query 第一个案例 <!DOCTYPE ...
随机推荐
- Python面试题_中级版
Python 面试题 1.Python是如何进行内存管理的 对象引用机制.垃圾回收机制.内存池机制 1.1对象引用机制 Python内部使用引用计数,来保持追踪内存中的对象,所有对象都有引用计数. 引 ...
- 深度解析：java必须掌握的知识点——类的重用
类继承的概念和语法 类继承的概念 根据已有类来定义新类,新类拥有已有类的所有功能. Java只支持类的单继承,每个子类只能有一一个直接超类(父类). 超类是所有子类的公共属性及方法的集合,子类则是超类 ...
- level2行情是什么意思？
level2行情是由上海证券交易所推出的实时行情信息收费服务产品,主要提供在上海证券交易所上市交易的证券产品的实时交易数据,包括十档行情,买卖队列,逐笔成交,委托总量和加权价格等数据. 投资者根据其功 ...
- [COCI2016-2017#1] Mag
[COCI2016-2017#1] Mag 题解 题目TP门 题目描述 你将获得一棵由无向边连接的树.树上每个节点都有一个魔力值. 我们定义,一条路径的魔力值为路径上所有节点魔力值的乘积除以路径上的节 ...
- iMindMap思维导图中可以插入哪些附件？
iMindMap(Windows系统)不仅拥有灵活的排版功能,而且还允许用户插入多种附件,丰富思维导图的内容.用户可以为思维导图添加图片.网址.录音等文件,让导图更显生动性.实用性. 将图片.录音等文 ...
- httpservlet类中两个service方法
在浏览器访问html页面时,当数据提交给servlet时发生了什么,这是我们需要了解的. 1.我们需要了解一下servlet的继承体系. servlet接口 ------->GenericSer ...
- uniapp分包(详尽版)
PS:本文是笔者对基于uniapp的一小程序项目进行分包后的复盘文档,不足之处请多多指教. 一:分包相关概念 本质上是改变项目的路由以及优化项目各个模块的启动时间的一种优化技术. 主包与分包的概念 1 ...
- devc++编译时 undefined reference to `__imp_WSAStartup'
socket编程时遇到的问题:
- 使用 Jasypt 加密 Spring Boot 配置文件
一.添加依赖包 <dependency> <groupId>com.github.ulisesbocchio</groupId> <artifactId> ...
- 使用 IDEA 创建多模块项目
网上找如何创建多模块项目的资料,大多类似,实践中又各有问题,此文为摸索之后总结 最终项目结构如下: 项目引用关系:app → service → dao 新建父项目 multi-parent mult ...