黑马程序员技术交流社区

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

---

作者: 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