移动 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 ...
随机推荐
- Java编码和字符集（详解）
[1]什么是编码? [2]通过生活案例: [3]由权威机构形成的编码表才可以称之为:字符集 ASCII 英文字符集 用一个字节的7位表示 IOS8859-1 西欧字符集 用一个字节的8位表示 GB23 ...
- 08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用
Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构. 安装3.x版本的Vue脚手架 /* npm install -g @vue/cli@3.3 */ 基于3.3版本的脚手架命令创建Vue项目 ...
- RedisEclipse
1.Eclipse配置 2.HelloWorld import redis.clients.jedis.Jedis; public class TestPing { public static voi ...
- scrapy学习之爬虫练习平台22
前言 上一篇文章中爬取了爬虫练习平台的所有 ssr 网站,都是比较简单的,没有反爬措施,这次来爬一下后面的 spa 系列. 环境准备 这里沿用了上篇文章的环境和设置,就不重新搭建环境了. 开始爬取 s ...
- python编码规范以及推导式的编写
一.python 的编码规范
- 【转】AWVS扫描小技巧
1.文件头加 Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html) 可以绕过狗,waf ...
- 云服务器-Ubuntu更新系统版本-更新Linux内核-服务器安全配置优化-防反弹shell
购入了一台阿里云的ESC服务器,以前都用CentOS感觉Yum不怎么方便,这次选的Ubuntu16.04.7 搭好服务之后做安全检查,发现Ubuntu16.04版本漏洞众多:虽然也没有涉及到16.04 ...
- 什么是NTFS文件格式
说到磁盘格式,想必大家对于NTFS格式并不陌生.我们使用的u盘等硬盘设备很多都应用了此格式.NTFS文件格式究竟是什么?它都有哪些特点?今天,小编将利用这篇文章为大家进行介绍. 一.什么是NTFS文件 ...
- 【AcWing 99】激光炸弹——二维前缀和
(题面来自AcWing) 一种新型的激光炸弹,可以摧毁一个边长为 R 的正方形内的所有的目标. 现在地图上有 N 个目标,用整数Xi,Yi表示目标在地图上的位置,每个目标都有一个价值Wi. 激光炸弹的 ...
- Git基本操作（一）
Git 使用(一) - git init 初始化仓库 - git status 仓库状态 - git add filename 单个文件加入暂存 - git add. 全部加入暂存 - git com ...