rem适配方案
原理:当设备尺寸发生改变的时候,等比例适配当前设备,.使用媒体查询根据不同设备按比例设置html的字体大小,页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化。
常见的设计稿:
phone 45 : 640px
iphone 678 :750px
Android : 常见320pX、360pX、375pX、384pX、400pX、414pX500p×、720pX ;大部分4.7~5寸的安卓设备为720pX
基本以750px为准
谷歌常手机模拟器默认设备
less+rem+媒体查询 方案
结合less、rem和媒体查询三种技术,检测不同视口宽度,从而改变html字号影响rem。为了方便计算使用less预解释语言,这种方案还是比较繁琐。
总结:
①最后的公式:页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③或者:页面元素的rem值 = 页面元素值(px) / html font-size 字体大小
flexible.js+rem 方案(推举)
flexible.js相关资料
W3C
github资源
项目应用:
结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FC游乐园</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./lib/iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 主体内容 -->
<div class="main">
<!-- banner -->
<div class="banner">
<ul>
<li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
</ul>
</div>
<!-- 活动标题 -->
<div class="title">
<h4>乐园活动</h4>
</div>
<!-- 活动 -->
<div class="item">
<!-- 活动图 -->
<div class="pic">
<a href="#"><img src="./uploads/item_1.png" alt=""></a>
<!-- 活动状态 -->
<div class="status">进行中</div>
<!-- 收藏 -->
<div class="collect">
<i class="iconfont icon-shoucang1"></i>
</div>
</div>
<!-- 活动介绍 -->
<div class="info">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<div class="rest">
<p>
<i class="iconfont icon-qizhi"></i>
<span>200人已报名</span>
</p>
<p>
<i class="iconfont icon-shizhong"></i>
<span>本周六开始</span>
</p>
</div>
<span class="type">免费</span>
</div>
</div>
<!-- 底部工具栏 -->
<div class="toolbar">
<a href="#" class="current">
<i class="iconfont icon-index-copy"></i>
<span>首页</span>
</a>
<a href="#">
<i class="iconfont icon-youhuiquan"></i>
<span>卡券</span>
</a>
<a href="#">
<i class="iconfont icon-iconfront-"></i>
<span>我的</span>
</a>
</div>
<script src="./js/flexible.js"></script>
</body>
</html>
总结:应用flexble.js后不再需要关注移动适配的代码,只需要关注移动设备的布局即可,方便了许多。其中base.css是清除默认样式的代码,normalize.less提高兼容性的代码。
响应式布局
响应式开发原理:使用媒体查询针对不同宽度的设备进行布局和样式的设置
设备的划分情况
小于768的为超小屏幕(手机)
768~992之间的为小屏设备(平板)
992~1200的中等屏幕(桌面显示器)
大于1200的宽屏设备(大桌面显示器)
响应式布局容器
响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果
在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小
父容器版心的尺寸划分
超小屏幕(手机,小于 768px):设置宽度为 100%
小屏幕(平板,大于等于 768px):设置宽度为 750px
中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px
Bootstrap框架应用
它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件
bootstrap优点:
标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈,不断的更新迭代
让开发更简单,提高了开发的效率
基本使用
引入文件bootstrap.min.css即可使用框架的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BootStrap使用方法</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<style>
div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
栅格系统的使用:
bootstrap栅格系统
一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局
基础应用
按照不同屏幕划分为12 等份
行(row) 可以去除父容器作用15px的边距
xs-extra small:超小; sm-small:小; md-medium:中等; lg-large:大;
列(column)大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名,以便划分不同份数 例如 class=“col-md-4 col-sm-6”
栅格嵌套
栅格系统内置的栅格系统将内容再次嵌套
可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
响应式工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>栅格系统</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<style>
.container div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容 -->
<div class="container">
<div class="col-lg-3 col-md-6">1</div>
<div class="col-lg-3 col-md-6">2</div>
<div class="col-lg-3 col-md-6">3</div>
<div class="col-lg-3 col-md-6">4</div>
</div>
</body>
</html>