移动端布局主要分为四类:流式布局(百分比布局),flex布局(伸缩布局),rem适配布局,响应式布局。
当前,国内常见的移动端浏览器都是根据webkit修改过来的内核,因此在兼容移动端主流浏览时,处理webkit内核浏览器即可。
视口(viewport)就是浏览器显示页面的屏幕区域。视口可分布局视口、视觉视口和理想视口。
一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。
字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。
我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。
为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口,对设备来讲,是最理想的视口尺寸。
需要手动添加meta视口标签通知浏览器操作。meta视口标签的主要目的是:布局视口的宽度应该与理想视口的宽度一致,简单来说就是设备有多宽,布局视口就有多宽。
开发最终会使用理想视口,而理想视口就是将布局视口的宽度修改为视觉视口。
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
width: 宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale: 初始缩放比,大于0 的数字,一般为1.0;
maximum-scale:最大缩放比,大于0 的数字,一般1.0;
minimum-scale:最小缩放比,大于0 的数字,一般1.0;
user-scale:用户是否可以缩放,yes或no(1或0)
最标准的viewport设置:
物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334
一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比
**Retina(视网膜屏幕)**是一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。
在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题。通常使用二倍图
background-size 属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度;
属性值:长度|百分比|cover|contain;
cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
1.单独制作移动端页面(主流)
通常情况下,网址域名前面加 m(mobile) 可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。
也就是说,PC端和移动端为两套网站,pc端是pc断的样式,移动端在写一套,专门针对移动端适配的一套网站.
2.响应式页面兼容移动端(其次)
1.移动端浏览器兼容问题
移动端浏览器基本以 webkit 内核为主,因此我们就考虑webkit兼容性问题。我们可以放心使用 H5 标签和 CSS3 样式。同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可
2.移动端公共样式
移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css:保护了有价值的默认值
Normalize.css:修复了浏览器的bug
Normalize.css:是模块化的
Normalize.css:拥有详细的文档
官网地址: http://necolas.github.io/normalize.css/
传统模式宽度计算:盒子的宽度 = CSS中设置的width + border + padding
CSS3盒子模型: 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
也就是说,我们的CSS3中的盒子模型, padding 和 border 不会撑大盒子了
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
移动端可以全部使用CSS3 盒子模型
PC端如果完全需要兼容,就用传统模式,如果不考虑兼容性,就选择 CSS3 盒子模型
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
常用初始化样式
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
流式布局,就是百分比布局,也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
网页中主要的划分区域的尺寸使用 百分数(搭配min-width, max-width 属性使用),例如,设置网页的主题宽度为80%,min-width为960px。图片也做类似处理(width:100%, max-width 一般设置为图片本身的尺寸,防止被拉伸而失真)。
屏幕分辨了变化时,页面里元素的大小会变化但布局不会改变。【如果屏幕太大或者太小都会导致元素无法正常显示】
使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域(viewport)和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合max-width 和 min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但是缺点明显:
felx是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为felx布局。felx布局操作方便,布局极其简单,移动端使用比较广泛,PC端浏览器支持情况差,IE11或更低版不支持flex或仅部分支持。
flex布局原理
总结
总结:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
注意:主轴和侧轴是会改变的,就看flex-direction设置谁为主轴,剩下的就是侧轴。
row | 默认值:从左到右 |
---|---|
row-reverse | 从右到左 |
column | 从上到下 |
column-reverse | 从下到上 |
flex-start | 默认值:从头开始 如果主轴是x轴,则从左到右 |
---|---|
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐(如果主轴是x轴 则水平居中) |
space-around | 平分剩余空间 |
space-between | 先两边贴边 再平分剩余空间(重要) |
align-content设置子项在侧轴上的排列方式 并且只能用于子项出现换行的情况(多行),在单行的下是没有效果的。
flex-start | 默认值在侧轴的头部开始排列 |
---|---|
flex-end | 在侧轴的尾部开始排列 |
center | 在侧轴的中间显示 |
space-around | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴先分布两边,在平分剩余空间 |
stretch | 设置直线法元素高度平分父元素高度 |
flex-flow属性是flex-direction和flex-wrap属性的复合属性
flex-flow: row wrap;
总结: 单行找align-items 多行找align-content
flex属性定义子项目分配剩余空间,用flex来表示占多少份数
.item {
flex: ; /*默认值为0*/
}
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
数值越小,排列越靠前,默认为0;
.item {
order: ;
}
rem和em区别 rem(root em)和 em 都是顺茵不同网页字体大小展现而产生的。其中,em 是相对于其父元素,在实际应用中会带来许多不便;而rem是始终相对于html大小,及页面根元素。
比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小。
特点: 包裹文字的各元素的尺寸采用rem做单位,而页面的主要划分区域的尺寸仍使用百分数或px做单位(同「流式布局」或「静态/固定布局」)**。**早期浏览器不支持整个页面按比例缩放,仅支持网页内文字尺寸的放大,这种情况下。使用rem做单位,可以使包裹文字的元素随着文字的缩放而缩放。
媒体查询(Media Query) 是CSS3新语法。
@media mediatype and|not|only (meadia feature) {
CSS-CODE;
}
mediatype 查询类型
将不同的终端设备划分成不同的类型,称为媒体查询。
值 | 解释说明 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于所有电脑屏幕、平板电脑、智能手机等 |
关键字
关键字是将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。
媒体特性
每种媒体查询都有各自不同的特性,根据不同的媒体类型设置不同的展示风格。
值 | 解释说明 |
---|---|
width | 定义输出设备中页面课件区域的宽度 |
min-width | 定义输出设备中页面最小可见区域宽度 |
max-width | 定义输出设备中页面最大可见区域宽度 |
4. 媒体查询书写规则
**注意:**为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,推荐从小到大写,这样代码更简洁。
css是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。
less(LeanerStyle sheets的缩写)是一门css扩展语言,也成为css预处理器。作为css的一种形式的扩展,他并没有减少css的功能,而是在现有的css的基础上,为css加入程序式语言的特性。一句话:less是一门css预处理语言,它扩展了css的动态属性。
它在css的语言基础上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了css的编写,并且降低了css的维护成本,就像它的名称一样,less可以让我们用更少的代码做更多的事情。
less中文网址:http://lesscss.cn/
其他常见的css预处理器;Sass,less,Stylus
变量是指没有固定的值,可以改变。css中的一些颜色和数值等经常使用。
@变量名:值;
Easy Less插件用来把less文件编译为css文件。下载安装Easy Less插件,只要保存一下less文件,就会自动生成css文件。
// 将css改为less
#header .logo {
width: 300px;
}
#header {
.logo {
width: 300px;
}
}
如果遇见 (交集|伪类|伪元素选择器) ,利用&进行连接
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
/*Less 里面写*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;
rem适配方案
1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。
2.使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
③每一份作为html字体大小,这里就是50px
④那么在320px设备的时候,字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100100像素的页面元素在 750屏幕下, 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1
⑧320屏幕下, html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
总结:
①最后的公式:页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③或者:页面元素的rem值 = 页面元素值(px) / html font-size 字体大小
手机淘宝团队出的简洁高效 移动端适配库
我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理
它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。
我们要做的,就是确定好我们当前设备的html 文字大小就可以了
比如当前设计稿是 750px, 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
里面页面元素rem值: 页面元素的px 值 / 75
剩余的,让flexible.js来去算
github地址:https://github.com/amfe/lib-flexible
总结:
因为flexible是默认将屏幕分为10等分
但是当屏幕大于750的时候希望不要再去重置html字体了
所以要自己通过媒体查询设置一下
并且要把权重提到最高
VSCode px 转换rem 插件 cssrem
因为cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
设备的划分情况:
响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
父容器版心的尺寸划分
但是我们也可以根据实际情况自己定义划分
媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
优点:适应pc和移动端,如果足够耐心,效果完美。
缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。(2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。
Bootstrap 来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
中文网 官网 推荐网站
框架:顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
2.x.x:停止维护,兼容性好,代码不够简洁,功能不够完善。
3.x.x:目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。
4.x.x:最新版,目前还不是很流行
Bootstrap 使用四步曲:
创建文件夹结构 -----bootstrap单独新建一个文件夹
创建 html 骨架结构
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link href="css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<h1>你好,世界!h1>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>
<script src="js/bootstrap.min.js">script>
body>
html>
引入相关样式文件
"stylesheet" href="bootstrap/css/bootstrap.min.css">
书写内容
直接拿Bootstrap 预先定义好的样式来使用
修改Bootstrap 原来的样式,注意权重问题
学好Bootstrap 的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器,它提供了两个作此用处的类。
.container
.container-fluid
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
栅格嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内。
"col-sm-4">
"row">
"col-sm-6">小列
"col-sm-6">小列
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。
"row">
"col-lg-4">1
"col-lg-4 col-lg-offset-4">2
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
"row">
"col-lg-4 col-lg-push-8">左侧
"col-lg-8 col-lg-pull-4">右侧
响应式工具
为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
---|---|---|---|---|
.hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
参考文章:https://www.cnblogs.com/yanayana/p/7066948.html