rem
1.rem基础
rem单位
rem是一个相对单位,类似于em,em是父元素字体大小
不同的是rem是相对于html元素的字体大小
1.em相对于父元素的字体大小来说的
2.rem相对于html元素字体大小来说的
3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
2.媒体查询 Media Query
可以针对不同的屏幕尺寸设置不同的样式
@media mediatype and|not|only (media feature){
css-Code;
}
mediatype 查询类型
all 所有设备
print 用于打印机和打印预览
scree 用于电脑屏幕、平板电脑、智能手机等
关键字
and|not|only
media feature 媒体特性
width、min-width、max-width
1.媒体查询一般按照从大到小或者从小打大的顺序来
2.screen还有and、px必须带上不能省略
3.媒体查询+rem实现元素动态大小变化
@media screen and (min-width:320px)
Less基础
-
less是一门css预处理语言,它扩展了css的动态特性。
-
less变量 @变量名:值;
PS:变量名区分大小写,不以数字开头
-
less编译 vocode Less插件
-
less嵌套
1.less嵌套,子元素的样式直接写到父元素里面就好了
2.如果有伪类、交集选择器、伪元素选择器,我们内层选择器
的前面需要加&
3.less嵌套写法
a{
&:hover{
color:red;
}}
- less运算
1.我们运算符的左右两侧必须敲一个空格隔开;
2.两个数参与运算,如果只有一个数有单位,则最后的结果就以 这个单位为准;
3.两个数参与运算,如果两个数都有单位,而且不一样的单位, 最后的结果以第一个单位在为准
rem适配方案
一、适配的目标:
1.让一些不能等比自适应的元素,达到当设备尺寸发生变化的时候,等比例适配当前设备
2.使用媒体查询根据不同的设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当htnl字体大小发生变化元素的尺寸也会发生变化,从而达到等比例适配
二、rem适配方案技术使用(市场主流)
技术方案1
less、媒体查询、rem
技术方案2(推荐)
flexible.js rem
1.设计稿中常见尺度宽度(现在基本以750px为准)
设备 | 常见宽度 |
---|---|
iphone4.5 | 640px |
iphone x | 750px |
Android | 4.7~5 720px |
2.动态设置html标签font-size大小
元素的大小取值方法:
①最后的公式:页面元素的rem值 = 页面元素值(px)/(屏幕宽度/划分的份数)
②屏幕宽度/划分的份数 就是html font-size的大小
③页面元素的rem值=页面元素值(px)/html font-size字体的大小
3.适配方案2
高效简洁的移动端适配库
利用js(flexible.js)去算
默认将设备划分为10等份
px转换rem 插件 cssrem 默认字体大小为16px
Bootstrap
响应式开发
1.响应式开发原理
就是使用媒体查询针对不同宽度的设备经行布局和样式的设置,从而设配不同设备的目的
设备划分 | 尺寸区间 | 设置宽度 |
---|---|---|
超小屏幕(手机) | <768px | 100% |
小屏设备(平板) | [768px,992px) | 750px |
中等屏幕(桌面显示器) | [992px,1200px) | 970px |
宽屏设备(大桌面显示器) | >1200px | 1170px |
2.响应式布局容器
响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
Bootstrap前端开发框架
Bootstrap是基于HTML、css和JavaScript的,简洁灵活
1.优点
标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈、不断的更新迭代
让开发更简单,提高了开发的效率
2.使用
控制权在框架本身,使用者要按照框架所规定的某种规范进行开发
Bootstrap使用四步曲:1.创建文件夹结构2.创建html骨架结构3.引入相关样式文件
4.书写内容:
直接拿Bootstrap预先定义好的样式来使用
修改Bootstrap原来的样式,注意权重问题
学好Bootstrap的关键在于它定义了哪些样式,以及这些样式能实现什么样的效果
3.布局容器
1.container类
响应式布局的容器 固定的宽度 适配各种屏幕
2.container-fluid类
流式布局容器 百分百宽度
占据全部视口的容器
适合于单独做移动端开发
Bootstrap栅格系统
1.定义
栅格系统指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局,系统自动分为最多12列
container的宽度是固定的,但在不同屏幕下,container的宽度不同,我们把container划分为12等份
PS:一定不要忘记引入bootstrap的样式文件!!!
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
2.栅格系统参数
栅格系统用于一系列的行与列的组合来创建页面布局,你的内容就可以放入这些创建好的布局中
手机<768px | 平板>=768px | 桌面显示屏>=992px | 大桌面显示屏>=1200px | |
---|---|---|---|---|
.container最大宽度 | 自动(100%) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 | 12 | 12 | 12 |
3.列嵌套
栅格系统内置的栅格系统将内容再次嵌套。我们通过添加一个新的.row元素和一系列.col-sm- * 元素到已经存在的.col-sm-* 元素内
<!-- 列嵌套 -->
<div class="col-md-4">
<div class="row">
<div class="col-md-6">小列</div>
<div class="col-md-6">小列</div>
</div>
</div>
PS:快捷键提示:(写代码的时候就想偷个懒,去搜了一下,然后总结)
①变量重命名 F2
②按住**alt,**用鼠标左键点击,可以出现多个光标,输入的代码可以在光标处同时增加
③按住Ctrl + Alt,再按键盘上向上或者向下的键,可以使一列上出现多个光标
④选中一段文字,按shift+alt+i,可以在每行末尾出现光标
⑤光标放在一个地方,按ctrl+shift+L或者ctrl+f2,可以在页面中出现这个词的不同地方都出现光标,可以同时修改相同的变量
⑥任何光标操作,可以按Ctrl + U取消
⑦替换字符串 ctrl +f 按三角可出现替换框,右边可逐一替换或全部替换
4.列偏移
使用.col-md-offset-* 类可以将列向右偏移。通过使用* 选择器为当前元素增加了左侧的边距(margin)
<!-- 列偏移 -->
<!-- 偏移的份数 = 12 - 两份盒子的份数 = (12 - 一份盒子的份数)/2 -->
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg3 col-lg-6">2</div>
</div>
5.列排序
通过使用.col-md-push-* 和 .col-md-pull-* 类就可以很容易改变列的顺序
<!-- 列排序 -->
<!-- 左右交换顺序,左推右拉 -->
<div class="row">
<div class="col-lg-4 col-lg-push-8">左侧</div>
<div class="col-lg-8 col-lg-pull-4">右侧</div>
</div>
6.响应式工具
为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容
类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
---|---|---|---|---|
.hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
与之相反的,是visible-xs visible-sm visible-md visible-lg 是显示某个页面内容
移动端布局总结
流式布局(百分比布局)
flex弹性布局(推荐)
rem适配布局(推荐)
响应式布局
建议:选取一种主要技术类型,其他技术作为辅助,这种混合技术开发