移动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:把图像图像等比扩展至最大尺寸,以使其宽度或高度完全适应内容区域(可能有空白区域)。

移动端开发选择

  1. 单独制作移动端页面(主流)
  • 通常情况下,网址域名前面加m(mobile) 可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。
  1. 响应式页面兼容移动端(其次)
  • 三星电子官网: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; }

移动端常见布局

  1. 单独制作移动端页面
  • 流式布局(百分比布局)
  • flex 弹性布局(强烈推荐)
  • less+rem+媒体查询布局
  • 混合布局
  1. 响应式页面兼容移动端
  • 媒体查询
  • bootstrap
流式布局(百分比布局)
  • 流式布局,就是百分比布局,也称非固定像素布局。
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
  • 流式布局方式是移动web开发使用的比较常见的布局方式。
  • max-width   最大宽度(max-height  最大高度)
  • min-width    最小宽度(min-height  最小高度)
posted @ 2020-03-09 12:07  兔子大叔  阅读(267)  评论(0编辑  收藏  举报