流式布局 笔记----（一）需要掌握的基础知识

1.浏览器现状

    PC常见浏览器|移动端浏览器----》webkit内核

2.手机屏幕

    谷歌调试

    搭建本地服务器

    外网服务器

3.调试

 

4.视口

viewport（屏幕区域）-->布局视口 视觉视口 理想视口

5.meta视口标签

<meta name="viewport" content="width=device-width" inslial-scale="1.0",maxinum=1.0

mininum-scale=1.0 user-scalable=0;

 >

6.二倍图

物理像素----->分辨率

pc端是一一duiying

1px等于两个物理像素-----》物理像素比 物理像素比越高画质好

 

Retina是一种显示技术，可以吧更多的物理像素压缩到更高分辨率

多倍图会放大像素比

图片放在android

 

3.3背景缩放

background-size：宽度，高度；

只想一个参数 是宽度 高度等比缩放

cover  覆盖  完全覆盖div盒子 可能有部分显示不全

 

contain 宽度和高度完全适应内容区域----->宽度和高度等比拉伸 可能有部分空白区域

 

移动开发！

 

1.单独制作移动端页面

2.响应式布局

 

5.1移动端技术解决方案

box-sizing

 

padding和border不会撑大盒子模型

 

-webkit-tap-highlight-color：transparent；

-webkit-appearance：none；4

img a｛-webkit-touch0callout：none｝

vertical-align：middle；