基本概念meta标签viewport的使用学习技巧基本概念物理分辨率.pptVIP

主讲：邓舒婷 移动端页面布局 学习内容 基本概念 meta标签viewport的使用 学习技巧 基本概念 物理分辨率、逻辑分辨率、倍率与像素密度 物理分辨率和逻辑分辨率，物理分辨率是硬件所支持的，逻辑分辨率是软件可以达到的。 倍率与像素密度：以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。 基本概念 物理分辨率、逻辑分辨率、倍率与像素密度 iPhone的屏幕尺寸各不相同，从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头最猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。 都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360x640，只是倍率不同。 手机端网页没有统一标准了，比较流行的做法是按照iPhone5的尺寸来设计。倍率2，逻辑像素320x568。倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。 meta标签viewport的使用 1.width、height 可以定义值，或者 device-width | device-height 设备的宽高。 如width=device-width：宽度定义为设备宽度 2.initial-scale 初始缩放比例，即页面第一次 load 的时候缩放比例。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。 meta标签viewport的使用 3.maximum-scale：允许用户缩放到的最大比例。 4.minimum-scale：允许用户缩放到的最小比例。 5.user-scalable：用户是否可以手动缩放，如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。 学习技巧 1.清除浮动的技巧：消除子元素浮动对父元素背景/边框/不能被子元素撑开的方法： 2.建议将LOGO放在h1标签里面，方便搜索引擎抓取关键字。同时一个页面只建议使用一个h1标签。 3.父元素结尾处增加一空元素 div；并清除其浮动。缺点：如果布局复杂需要增加许多空标签 学习技巧 4.在父元素定义overflow:hidden（浏览器会自动检查浮动区域的高度，注.不必理会原理，知道用法即可。缺点：超出部分会被隐藏 5.利用伪类：after 父元素内容后增加空元素，并清除浮动。 6.将代码重用部分比如header footer分离出来，其他需要的文件重复引用即可 7.图片自适应:将图片设为display: block;max-width:100%