移动web开发01-流式布局
视口
视口定义
定义 就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。
- 布局视口(layout viewport) 一般手机浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。
- 视觉视口(visual viewport) 用户正在看到的网站的区域。
- 理想视口(ideal viewport) 对设备来讲,理想视口是最理想的视口尺寸。
meta视口标签
主要目的 布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽。
属性
标准写法:
- width:可视区域的宽度,值可为数字或关键词device-width
- height:同width
- intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放。
- maximum-scale=1.0, minimum-scale=1.0:可视区域的缩放级别,maximum-scale表示用户可将页面放大的程度,1.0将禁止用户放大到实际尺寸之上。
- user-scalable:是否可对页面进行缩放,no 禁止缩放。
二倍图
物理像素&物理像素比
- 物理像素:设备像素(分辨率),一个设备的分辨率是固定的。
- 逻辑像素:CSS样式代码中使用的是逻辑像素,样式中的1px指一个逻辑像素。
- 物理像素比:物理像素与逻辑像素之间的比例,一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比。当像素比为1:1时,使用1个物理像素显示1个逻辑像素;当像素比为2:1时,使用4个物理像素显示1个逻辑像素。
二倍图
为什么需要二倍图
- 当物理像素比(window.devicePixelRatio)为2:1时,需要使用4个设备像素显示1个CSS像素。
- 对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开,会按照2:1放大到100px* 100px,这样会造成图片模糊。
- 在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题。
- [怎么做] 需要导入100px* 100px的图,用css缩到50px * 50px。
img{
/* 原始图片100px* 100px */
width: 50px;
height: 50px;
}
- 还存在三倍图,四倍图的情况。
背景缩放
- background-size:属性规定背景图像的尺寸
- background-size:背景图片宽度 背景图片高度(只写一个参数width会等比缩放)
- cover:把背景图像等比扩展至足够大,以使背景图像完全覆盖背景区域(内容可能显示不全)。
- contain:把图像图像等比扩展至最大尺寸,以使其宽度或高度完全适应内容区域(可能有空白区域)。
移动端开发选择
- 单独制作移动端页面(主流)
- 通常情况下,网址域名前面加m(mobile) 可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。
- 响应式页面兼容移动端(其次)
- 三星电子官网:www.samsung.com/cn/ ,通过判断屏幕宽度来改变样式,以适应不同终端。
- 缺点:制作麻烦,需要花很大精力去调兼容性问题。
移动端技术解决方案
- 移动端浏览器基本以webkit 内核为主,因此我们就考虑webkit兼容性问题。
- 移动端CSS 初始化推荐使用normalize.css/
CSS3 盒子模型box-sizing
- 传统模式宽度计算:盒子的宽度= CSS中设置的width + border + padding
box-sizing: content-box; - CSS3盒子模型:盒子的宽度= CSS中设置的宽度width 里面包含了border 和padding
box-sizing: border-box; - 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; }
移动端常见布局
- 单独制作移动端页面
- 流式布局(百分比布局)
- flex 弹性布局(强烈推荐)
- less+rem+媒体查询布局
- 混合布局
- 响应式页面兼容移动端
- 媒体查询
- bootstrap
流式布局(百分比布局)
- 流式布局,就是百分比布局,也称非固定像素布局。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
- 流式布局方式是移动web开发使用的比较常见的布局方式。
- max-width 最大宽度(max-height 最大高度)
- min-width 最小宽度(min-height 最小高度)