菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 邹润英_前端_221124 [打印本页]

作者: 我想 时间: 2022-11-24 21:18
标题: 邹润英_前端_221124
一.今日学习：视口和二倍图：视口：视口就是浏览器显示页面内容的屏幕区域，视口可分为布局视口、视觉视口和理想视口                                             布局视口：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的pc端在手机上显示的问题。一般可以通过手机对页面缩放。
                                       视觉视口：是指用户正在看到的网站的区域，我们是可以通过缩放去操作视觉视口里面看到的内容的，但是不影响布局视口，布局视口任然采用的是原来的宽度。
                                       理想视口：为了使网站在移动端有最理想的浏览和阅读宽度而设定的，对于设备来说，理想视口是最理想的视口尺寸。
                                                需要手动来添加meta标签来进行视口的设置。
                                                meta主要来布局视口的宽度和理想视口的宽度一致，简单来说设备有多宽，我们的布局视口就有多宽。
                                                      meta标签：name=“viewport”声名设置视口的meta标签。
                                                      width宽度设置的是viewport的宽度，设置为device-width特殊值时，就是让页面宽度和设备宽度保持一致。
                                                      initial-scale初始缩放比，可以设置成大于0的数字，一般会设置为1.0。
                                                      maximum-scale最大缩放比，可以设置为大于0的数字。
                                                      minimum-scale最小缩放比。
                                                      user-scalable是否允许用户进行缩放，值可以设置为1或0
                                       物理像素和物理像素比：物理像素点指的是屏幕的最小颗粒，是真实的物理存在，是设备在出厂的时候就设置好的。
                                                            开发时的1px像素单位不一定等于一个物理像素。
                                                            一个px能显示的物理像素点的个数，就叫做物理像素比或屏幕像素比。
                                       背景缩放：background-size：具体的长度单位/百分比/cover/contain
                              cover让背景图片覆盖盒子，contain是背景图片到达盒子的任意边界就停止缩放。

                  移动端开发的选择和技术方案
                                       移动端的主流方案：单独制作移动端网页：通常情况下，移动端的网页都是m开头的。当我么使用移动端打开网页时，移动罐会自动识别我们移动端设备来匹配相应的移动端网页。pc端是一套单独的网页，移动端是另一套单独的网页。
                     响应式的方式来制作网页：PC端和移动端共用一套网页，在不同的屏幕下进行不同的匹配。
                                       浏览器的兼容问题：移动端的浏览器基本都是以webkit内核为主，我们主要考虑webkit兼容性即可。移动端里面我们可以放心的去使用HTML5和CSS3的样式。同时我们的浏览器的私有前缀只需要考虑添加webkit就行。
                                       移动端的常见布局：1.移动端单独制作（主流）：流式布局（百分比布局）Flex布局（强烈推荐的布局技术）less+rem+媒体查询进行布局混合布局
                                                      2.响应式（次要布局方式）媒体查询、Bootstrap布局
                                       流式布局：就是百分比布局，也叫作非固定像素布局。通过盒子的宽度设置为百分比的方式来根据屏幕的宽度进行伸缩，不受固定像素的影响。
                                       Flex布局：传统布局和Flex布局的区别：传统布局的兼容比较好，但布局比较繁琐，局限性大。而flex布局操作方便、布局简单，移动端应用非常广泛。
                              布局原理：用来为盒子模型提供大量的灵活性，任何一个容器都可以制定为flex布局、当我们给父盒子设置为flex布局后，子元素里面的float、clear和vertical属性都将失效。采用flex布局的元素称为flex容器，他里面的所有的子元素自称为元素的成员。
                     核心：通过给父元素添加flex属性来控制子元素的排列方式。
                              flex布局父项常见属性：flex-direction设置主轴方向
               justify-content设置主轴上子元素的排列方式
               flex-wrap设置子元素是否换行：默认值是不进行换行的。nowrap不换行，wrap换行。
               align-items设置侧轴上子元素的排列方式（单行）
               align-content设置侧轴上的子元素的排列方式（多行）
               flex-flow是flex-direction和flex-wrap的复合属性
                              flex布局子项常见属性：flex子项占得份数：给子项直接设置flex，每一个子项都可以平分父项的空间。如果父元素中有一个子项有自己的宽高，那么就是在该子项占用的剩余空间内进行平分
               align-self控制子项自己在侧轴上的排列方式：单独控制某一个子项的排列方式，可以覆盖align-items。
               order属性来定义子项的排列顺序

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)