移动 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 ...
随机推荐
- DevOps，你真的了解吗？
与大数据和PRISM(NSA的监控项目之一),DevOps(开发运维)如今是科技人士挂在嘴边的热词,但遗憾的是,类似圣经,每个人都引用DevOps的只言片语,但真正理解并能执行的人极少.根据CA的一项 ...
- springboot同一项目部署多实例
添加 -Dserver.port=xxxx 将配置文件放在nacos注册中心时,要记得在启动第二个实例记得把原来端口注释掉,如果配置文件在本地就不必注释掉了
- 史上最全！2020面试阿里，字节跳动90%被问到的JVM面试题（附答案）
前言:最近老是收到小伙伴的私信问我能不能帮忙整理出一份JVM相关的面试题出来,说自己在大厂去面试的时候这一块问的是特别多的,每次自己学的时候每次都学不到重点去.这不他来了,一份详细的JVM面试真题给大 ...
- 对KVC和KVO的理解
html { overflow-x: initial !important } :root { --bg-color: #ffffff; --text-color: #333333; --select ...
- C语言讲义——文件操作
fopen( ) 函数:创建一个新的文件或者打开一个已有的文件 FILE *fopen( const char * filename, const char * mode ); 关于参数mode的取值 ...
- 在windows环境下 nginx + .net core 3.1 实现反向代理和负载均衡
一.创建.net core web 应用 1.首先打开vs2019创建好.net core web应用,简单的注入IConfiguration 便于打印端口号展示效果. 1 private reado ...
- CentOS 7搭建本地yum源
问题 CentOS7.1安装rpm包时提示缺失包,有些包iso里面也没有,只能从外网yum,这种情况下,可以提前yum好所需的依赖包,做成一个本地yum源.将这些文件拷贝到没联网的机器就可以使用了. ...
- （转）React学习笔记（干货满满）
1. React 长什么样 React 是 facebook 开源出来的一套前端方案,官网在 https://reactjs.org . 先看一个简单的样子: <!DOCTYPE html> ...
- 真香，理解记忆法学习Python基础语法
这篇文章很难写!我最开始学 Python,和大多数人一样,是看的菜鸟教程: 在写完这篇文章的第一遍后,我发现并没有写出新意,很可能读者看到后,会和我当初一样,很快就忘了.我现在已经不是读者而是作者了, ...
- Python中字符串使用单引号、双引号标识和三引号标识，什么是三引号？什么情况下用哪种标识?
一.三引号是指三个单引号或者三个双引号: 二.Python中字符串如果以单引号.双引号标识和三引号标识开头,则字符串结尾也必须是对应的标识,不能变更: 三.三者的异同: 1.三者都是字符串,大部分情况 ...