移动 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 ...
随机推荐
- 15 张图， 把TCP/IP 讲得一清二楚！
一.TCP/IP模型 TCP/IP协议模型(Transmission Control Protocol/Internet Protocol),包含了一系列构成互联网基础的网络协议,是Interne ...
- 【网鼎杯2020朱雀组】Web WriteUp
nmap nmap语法,很简单. 127.0.0.1' -iL /flag -oN vege.txt ' phpweb 打开,抓包,发现可以传递函数和其参数 试了一下很多函数都被过滤了,不能执行系统命 ...
- 超强工具集——GitHub 热点速览 Vol.47
作者:HelloGitHub-小鱼干 本周 GitHub 趋势榜精彩至极,先是 JetBrains 开源的图像渲染引擎 Skia 有了 Java 封装,一开源便获得 500+ star,再是支持开发者 ...
- 3种办法教你解决Vegas预览画面卡顿问题
做视频的小伙伴都知道,剪视频的时候最烦躁的就是卡顿,不能编辑,不能预览.最近很多同学就反映在使用Vegas的时候,预览窗口播放非常卡顿,有时候根本预览不了,这该如何解决呢? 制作视频并不是简单的拼拼凑 ...
- 在CorelDRAW中为对象添加块阴影效果
我们可以使用CorelDRAW来绘制矢量图形,在勾画出简单的图形后,往往还需要对它们进行一些或简单或复杂的处理,以增加一定的艺术效果.CDR中可供选择的效果有很多,作用的对象可以是文字,也可以是图案. ...
- iOS 搜索条使用详解
在ios开发中搜索条的使用挺常见的,不过之前一直没用到也没细细研究,最近做外包项目的时候刚好用到,在这里记录一下使用的过程,只要理解了原理,其实还是比较简单的!上传的图片有点大,刚好可以看清楚它的使用 ...
- 再论<? extends T>和<? super T>
参考: https://www.cnblogs.com/drizzlewithwind/p/6100164.html Java 泛型 <? super T> 中 super 怎么 理解?与 ...
- Java数据结构（十）—— 树
树 树的概念和常用术语 常用术语 节点 根节点 父节点 子节点 叶子节点:没有子节点的节点 节点的权:节点的值 路径:节点A到节点B的路径 层 子树 树的高度:最大层数 森林:多颗子树构成森林 二叉树 ...
- 【应用服务 App Service】解决无法从Azure门户SSH登录问题
问题描述 中国区的Azure App Service(应用服务)已经支持创建Docker并选择Linux环境.在使用中,我们可以继续通过kudu站点的方式登录查看站点的一些日志及部署文件.它的登录方式 ...
- 【坑爹的mybtis plus】wrapper.in击垮了我们的数据库！
mybatis plus让我们从很大程度上实现了用"java去写sql",但是有些很隐晦的使用方式,如果不注意的话,也会引起错误: 如果.in的时候给了一个null,这个时候并不会 ...