移动web开发01-流式布局

标签：缩放   initial   空白   理想   最小   str   mobile   流式   质量   

视口

视口定义

定义 就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。

• 布局视口（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? 最小高度）

移动web开发01-流式布局

标签：缩放   initial   空白   理想   最小   str   mobile   流式   质量   

原文地址：https://www.cnblogs.com/chri330dj/p/12447961.html