1】视口:浏览器显示内容的区域。
PC端:
屏幕大
视口:浏览器的大小。而且可以改变浏览器的大小,也就改变了视口的大小。
手机端:
屏幕小
浏览器大小是不能改变的。
历史问题:以前布局的页面是不是都是以pc端为主,小屏幕怎么显示大网页。
解决:手机浏览器厂商,设置了默认的视口--布局视口layout viewport 980px。
现在的问题:随着手机设备的发展,专门针对手机端设计小页面,但浏览器的默认视口比较大。
解决:发明了1个meta标签,作用:改变手机浏览器的默认视口大小,根据手机浏览器大小。
2】meta标签(能够在移动页面中复制过来,知道含义)
作用:根据手机浏览器屏幕大小,改变手机浏览器的默认视口大小。
默认视口大小 = 设备屏幕大小
3】
物理像素:屏幕的发光点(分辨率),
css像素(布局像素)
pc 端:1px就等于1个物理像素。
移动端:以iphone8为例,物理像素750个发光点,网页布局时,375px就占满了浏览器屏幕。
物理像素比:在浏览器的css中设置1px,要用几个发光点去发光显示。
4】倍图问题
1)由来:图片在高清的屏幕显示时,会被放大,图片放大就会模糊。
2)解决:制作图片时制作倍图,布局显示的时候缩小显示。
1》插入图片(设置图片的宽、高)
2》背景图片(缩放背景图,background-size:; 把整个图片进行缩放)
1>单个背景图
2>精灵图【量准坐标】
第1步,先在fireworks,把精灵图缩小一半,然后量坐标
第2步,在代码里,设置背景图片,并把背景图片缩小一半。
5】技术选型
1》单独制作移动端页面---主流
一个项目开发两套页面(pc端一套、移动端一套)
注意点:
1)浏览器兼容性问题(只考虑webkit内核,放心大胆使用h5和c3)
2)样式初始化,使用别人写好的。
3)移动端元素,使用c3的新的盒子模型进行布局(padding和border不会撑开盒子)
4)手机浏览器中会有一些默认的样式,清除。
布局方式:
1)流式布局(百分比布局)
① 布局盒子的宽度通通设置为百分比
② 布局盒子会设置一个最大值 max-width和一个最小值 min-width
2)flex布局(弹性盒布局)
3)rem布局
4)响应式布局
2》做响应式页面(兼容pc和移动端)
一个项目开发一套页面(根据屏幕大小进行自动适配显示)
缺点:工作量比较大,兼容性不好调,开发和维护成本高。理想效果不太好实现。 12年之前流行。 |
|