移动端布局
移动端视口:
视口(viewport)就是浏览器显示内容里面的浏览区,视口可以分为布局视口,视觉视口理想视口
1.布局视口(layout viewport)
2.视觉视口(visual viewport)
3.理想视口(ideal viewport)
理想视口对于设备来说是最理想的视口尺寸
需要手动添加meta视口标签通知浏览器操作
meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就有多宽
meta视口标签:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
1.视口和设备宽度保持一致
2.视口默认缩放比1.0
3.不允许用户自行缩放
4.最大允许的缩放比例1.0
5.最小允许缩放比例1.0
物理像素&物理像素比
1.物理像素比值得是屏幕最小颗粒,是物理真实存在的,这是厂商在出场的时候就设置好了,比如苹果6/7/8是750*1334
2.我们开发时1px不是等于一个物理像素的
3.pc端页面,1px等于一个物理像素,但是移动端就不同
4.一个px能显示的物理像素点个数,称为物理像素比或屏幕像素比
二倍图:
多倍图
1.对于一张50px*50px的图片,在手机retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊
2.在标准viewport中,使用倍数来提高图片质量,解决在高清设备中的模糊问题
解决方法:
1.我们需要一个50*50px(css像素)的图片,直接放到iPhone8设备里,会放大两倍100*100就会模糊
2.我们采取的是在img标签里放一张100*100的图片,然后手动把这张图片在css当中设置成50*50(CSS像素)
3.我们准备的图片,比我们实际需要的大小大两倍,这种方式就是2倍图
移动端布局操作顺序:
1.链接相应的CSS、JS文件。注意所链接文件顺序。
使用其他编码器时,注意设置
2.确定设计稿大小,改相应rem、js参数;(插件:cssrem)
640px设计稿/rem、js(function)为640,插件(font-size)改为64,
750px设计稿/rem、js为750,插件改为75。
3.设置页面为高度自适应;
html,body {height:100%}
盒子也要给{height:100%}
4.根据测量布局;
5.当整体产生滚动条时,设置position:absolute;脱离布局流
6.px、em、和rem的区别
1)概念
px:绝对单位,页面按精确像素展示。
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。
rem基础:
1.类似于em,em是父元素字体大小
2.不同的是rem基准是相当于html元素的字体大小
比如根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px就表示为24px
em和rem的区别:
1.em是相对父元素的字体大小来说的
2.rem是相对于html元素字体大小来说的
3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
2)em和rem的区别
PX特点:字体大小固定。
EM特点 :
a. em的值并不是固定的;
b.em会继承父级元素的字体大小。
rem特点:
rem是CSS3新增的一个相对单位(root em,根em),区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
如何计算rem
1.跟字体大小html:font-size默认设置为16px
2.假设盒子尺寸88px,然后除2等于44px(width:44px)
3.再用44除16 (最后得出width:2.75rem)
媒体查询
1.说明:(Media Query)是CSS3的新语法
媒体查询可以根据不同的屏幕尺寸在改变不同的样式
a.页面结构简单使用
b.使用@media查询,可以针对不同的媒体类型定义不同的样式
c.当你重置浏览器大小的过程中,页面也会根据浏览器的高度和宽度进行重新渲染页面
语法规范:
@media mediatype and/not/only (media feature){
css-code;
}
1.用@media开头,注意符号
2.mediatype 媒体类型
说明:将不同的终端设备划分成不同的类型,称为媒体类型
值:all用于所有设备,print用于打印说明,scree用于电脑屏幕,平板电脑,智能手机等
3.关键字and not only
说明:关键字讲媒体类型或多个媒体特性连接到一起作为媒体查询条件
and:可以将多个媒体特性连接到一起
not:排除某个媒体类型,相当于非的意思,可以省略
only:指定某个特定的媒体类型,可以省略
4.media feature 媒体特性,必须有小括号包含
说明:每种媒体类型都具有各自不同的属性,根据不同的媒体类型设置不同的展示风格,我们暂且了解三个,注意他们都要加小括号
with:定义输出设备中可见页面的宽度
min-with:定义输出设备中页面最小可见区域宽度
max-with:定义输出设备中页面最大可见区域宽度
这句话的意思就是:在我们屏幕上,并且,最大宽度是800px也是小于800px,{设置我们想要的样式}
max-width想当与小于等于800px
最小宽度
注意:
1.为了防止混乱,媒体查询时我们要按照要求从小到大或者由大到小的顺序来写,一般从小到大写这样代码更简洁
2.screen and 必须带上不能省略
3.数字后面也必须跟上单位
2.媒体查询引入资源:
说明:当样式比较繁多的时候,我们可以针对不同的媒体使用不同的stylesheets(样式表)
就是在link中判断设备的尺寸,然后引用不同的css文件
.语法
1)@media screen and (条件:最小宽度,最大宽度等)
2)min-width 若当前页面宽度大于min-width的值时,则样式生 效。注意!链接的css文件的min-width应从小写到大;
或者最大宽度:
rem适配方案
.屏幕分界点:
超小屏幕xs (移动设备)768px以下
小屏设备sm 768px-992px
中等屏幕md 992px-1200px
宽屏设备lg 1200px以上
现基本为750为基准