移动 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 ...
随机推荐
- matlab 第五章单元数组、字符串作业
1.创建 2×2 单元数组,第 1.2 个元素为字符串,第三个元素为整型变量,第四个元素为双精度(double)类型,并将其用图形表示. A=cell(2,2); A(1,1)={'mat'}; A( ...
- webug第六关:这关需要rmb购买哦
第六关:这关需要rmb购买哦 首先登陆,tom 123456 进行抓包改包
- 插件Spire.PDF帮你高效搞定PDF打印
Spire.PDF介绍 Spire.PDF是一个专业的PDF组件,能够独立地创建.编写.编辑.操作和阅读PDF文件,支持 .NET.Java.WPF和Silverlight.Spire.PDF的PDF ...
- 企业级工作流解决方案（九）--微服务Tcp消息传输模型之客户端处理
客户端启动 客户端启动主要做三件事情,1. 从配置文件读取服务调用配置,存储到全局对象中.2. 指定客户端编解码器工厂.3. 预连接,即预先建立与服务端的通信Chanel. [DependsOn(ty ...
- 深度分享：面试阿里，字节跳动，美团90%会被问到的HashMap知识
一,HashTable 哈希表,它相比于hashMap结构简单点,它没有涉及红黑树,直接使用链表的方式解决哈希冲突. 我们看它的字段,和hashMap差不多,使用table存放元素 private t ...
- PDF编辑：pdfFactory文本备注功能详解
除了word的doc文件外,PDF也是我们经常接触到的文件格式,经常需要在pdf文件上进行编辑与修改,或者给内容做提示和备注. 文件的文本备注功能可以用pdfFactory来进行,编辑打印PDF一条龙 ...
- Lambda表达式（一）入门认识篇
Lambda表达式(一)入门认识篇 Lambda简介 Lambda 表达式是 JDK8 的一个新特性,可以取代大部分的匿名内部类,写出更优雅的 Java 代码,尤其在集合的遍历和其他集合操作中,可以极 ...
- python selenium 时间搜索框查询和日期大小比较
在做selenium自动化的时候遇到 时间搜索框查询(如下图)并比较查询结果是否在输入的时间之类. 首先,第一步要做的就是选择时间,并获取到所选时间的文本信息 如上图所示,获取到的时间搜索框并没有文本 ...
- Linux中influx数据库进程杀不掉，父进程为1
influx数据库一直杀不掉,父进程为1是个僵尸进程 后来我才发现,influx是运行运行状态 我只需要使用命令,停掉influx即可停止改进程
- 【linux】系统调用版串口分析&源码实战
目录 前言 参考 1. 实战分析 1.1 开发步骤 1.1.1 获取串口设备路径 1.1.2 打开设备文件 1.1.3 配置串口 termios 结构体 1. c_iflag 输入模式标志 2. c_ ...