黑马程序员技术交流社区

标题: 流式布局 [打印本页]

作者: fany    时间: 2019-4-25 13:47
标题: 流式布局
        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年之前流行。




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2