8.25_百分比布局

移动web开发

现状

• 移动端内核主要是webkit 对h5 c3兼容
• 针对手机 碎片化严重 分辨率尺寸大小不一

视口 viewport

布局视口 layout viewport

页面默认设置布局视口 一般为980px

缺点：pc页面在手机端显示元素过小

视觉视口

只能显示网站某个区域 类似于通过一个窗口看网页

缺点：可视区域很小 看全需要滑动

※理想视口

需要给页面添加meta视口标签

优点：设备视口多宽页面视口多宽

meta视口标签

语法：

 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

<!-- width=devic-width：设备宽度 -->

※属性：

物理像素和物理像素比

• 手机本身自带分辨率是出厂设定好的
• 电脑1:1 手机不一定是1:1

二倍图

物理像素比高的手机会导致图片模糊

准备比原先大2倍3倍的图 背景缩放手动设置成原定尺寸

背景缩放 background-size √

设置背景图片的尺寸

css初始化 normalize.css

优化移动端技术上的一些问题

• 保护了有价值的默认值
• 修复了浏览器的bug
• 拥有模块化形式
• 拥有详细文档

官网地址: (http://necolas.github.io/normalize.css/)

css3盒子 box-sizing √

语法：

box-sizing:border-box; c3盒子
box-sizing:conten-box; 传统盒子

特点：不会因为内边距和边框撑大盒子

清除移动端特殊样式：

/*css3盒子模型*/
div {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
/*点击高亮我们需要清除清除  设置为transparent 完成透明*/
* {
    -webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {
    -webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,
a {
    -webkit-touch-callout: none;
}

技术选型

单独制作（主要）、响应式（辅助）

移动端布局

流式布局（百分比布局）：

• 非固定数值布局
• 需要配合max-width最大宽度 min-width 最小宽度
• 只管宽度不管高度

二倍精灵图

• 1.先等比缩小精灵图 再进行测量
• 2.插入页面中的精灵图也进行缩放 缩放原图的一半