指尖上行--移动前端开发进阶之路（读书笔记）----1.1页面布局

最新推荐文章于 2023-10-16 17:19:16 发布

zhangxiang_1102

最新推荐文章于 2023-10-16 17:19:16 发布

阅读量1.4k

点赞数

分类专栏：工作分享文章标签：前端开发读书笔记移动

本文链接：https://blog.csdn.net/zhangxiang_1102/article/details/78666539

版权

工作分享专栏收录该内容

15 篇文章 0 订阅

订阅专栏

chapter 1 移动页面开发

页面布局
页面调试
常用库和框架

1.1 页面布局

1.1.1 Vieport（视口，视图窗口）

设备像素
- 物理像素：屏幕分辨率；
- 设备独立像素：CSS像素（eg:IPhone5 CSS像素是320*568px）。
像素密度（PPI）
- PPI = ( 屏幕分辨率宽的平方+屏幕分辨率高的平方 )开根号 / 4 （eg：IPhone5的PPI大于等于326）
- 根据Apple提出的定义，电脑显示屏PPI高于200，手持平板显示屏PPI高于260及移动电话显示屏高于300的屏幕都称为Retina屏幕。（但是可以通过另一数值来判断是否是Retina显示屏—-设备像素比DPR）
设备像素比（DPR）
- DPR= 物理像素 / CSS像素
- 对于常规显示屏来说，物理像素和CSS像素比是1：1，但是在Retina屏幕设备中，一个CSS像素可能等于多个物理像素。
- 可以通过window的devicePixelRatio属性来获取当前设备的DPR：

<script>
    var dpr = window.devicePixelRatio;
    console.log('dpr-----' + dpr);
</script>

- eg：IPhone6 设备物理像素：750px * 1334px，CSS像素：375px * 667px，DPR=2。（IPhone从4代开始基本就是2，IPhone Plus例外（DPR：3），而安卓设备，碎片化很严重，没有一个定值。）

3个Viewport
- 1 . Layout Viewport
  - 默认的viewport，通过js的document.documentElement.clientWidth(Height）获取。
- 2 . Visual Viewport
  - 在浏览器或者App的Webview中的可视区域，通过js的window.innerWidth(Height）获取。
- 3 . Ideal Viewport
  - IPhone4/4s/5/5s 320px（竖屏下宽度，下同）
  - IPhone6s 375px
  - IPhone6 Plus/6s Plus 414px
  - Android（大部分） 320px
visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页，来看清楚网页的内容。
layout viewport 有网页的所有内容，他可以全部或者部分展示给用户。

设置Viewport
- 在head标签中输入一下代码（快捷键：meta:vp+tab键）：
```
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
```
- - Viewport可以用js进行动态的修改，以运用于一些特殊的项目中。
    - 淘宝就是通过js的document.write方式设置viewport的
```
    // 使用 document.write
     <script>
     document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">')
    </script>

    // 使用 setAttribute
    <meta id="viewport" name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <script>
    var vp = document.getElementById('viewport');
    vp.setAttribute('content', 'width=300')
    </script>
```
- 图片模糊问题
  - 原因：在Retina显示屏等屏幕下，一个位图像素就对应了多个物理像素，这就导致位图像素的色彩值不够分，多出来的物理像素就近取色，导致图片模糊。（当1个位图像素等于1个物理像素是，图片就是清晰的。当在高清屏幕中会用两个或多个物理像素来显示实际1px图片的内容。相当于把1px的图片放大显示了。）
  - 解决（应该让图片大一点，然后在代码里缩小图片！）：
    - 将原本的尺寸放大一定的倍数，这个倍数便是参考DPR值。（大多数设备的DPR都是2，因此，我们将视觉稿放大两倍去设计即可。
    - 压缩图标尺寸
      （1）直接设置宽高压缩。（eg：图片实际大小是240px * 480px，那就在< img >标签中设置 width=120px; height=240px; 这样在移动端就清晰了。）
      （2）通过设置background-size的方式来压缩（一般缩小一倍）。
1.1.2 布局形式
- 传统页面布局（考虑Retina屏幕的内容清晰度，页面两边背景图留白问题）
- 滑屏页面布局（每一页都是全屏，百分比布局，设置html，body{height:100%;}使div的高度100%）
  具体实现思路：
  - 三层div。
    - 第一层高度100%，设置overflow：hideen；。第二层设置高度1000%，等于10个屏幕的高度。第三层存放10个div，每一个div是一屏，高度为10%。
  - 使用 js 监听 touchstart，touchmove，touchend事件。
1.1.3 媒体查询
- 使用媒体查询
  - 方式1：用link在 < head>外链样式表。
    < link rel=”stylesheet” media=”screen and (max-width:320px)” href=”ip5.css”>
  - 方式2：直接写入< head>的style里面。
    @media screen and (max-width:320px) { background:#fff; }
- 媒体查询中的断点设置
  *根据内容宽度设置（根据设备宽度设置与内容宽度设置类似，不同之处在于 max-width设置断点为320px，360px，375px，414px，768px）
```
//css媒体查询：（根字体大小100px，如果10px大小，写成0.1rem） 

html { 
font-size : 100px; 
}

@media only screen and (min-width: 320px) and (max-width: 479px){ 
    html { 
        font-size: 42.67px !important; 
    } 
} 
@media only screen and (min-width: 480px) and (max-width: 639px){ 
    html { 
        font-size: 64px !important; 
    } 
} 
@media only screen and (min-width: 640px) and (max-width: 749px){ 
    html { 
        font-size: 85.34px !important; 
    } 
}

@media only screen and (min-width: 750px) and (max-width: 959px){ 
    html { 
        font-size: 100px !important; 
    } 
} 
@media only screen and (min-width: 960px) and (max-width: 1241px){ 
    html { 
        font-size: 128px !important; 
    } 
}

@media only screen and (min-width: 1242px){ 
    html { 
        font-size: 165.6px !important; 
    } 
}

//js控制（zepto / jQuery）（根字体大小100px，如果10px大小，写成0.1rem） 

function setFont() { 
let window_width = window.innerWidth; 
let font_size = parseFloat(window_width / 3.75); 
$(‘html’).css(‘font-size’, font_size); 
}

$(window).on(‘resize’, function () { 
setFont(); 
});
```
- - 根据设备方向设置
```
@media screen and (orientation:portrait){ /*设置竖屏时的样式*/}
@media screen and (orientation:landscape){ /*设置横屏时的样式*/}
```
- - 根据设备像素比设置
```
@media screen and (device-pixel-ratio:2){ /*设置设备像素比为2时的样式*/}
```
1.1.4 屏幕适应
- 百分比布局
  - 百分比布局非常适合移动端，能够很好地解决设备尺寸碎片化的情况，兼容性也非常好，而且元素的占比计算不会太复杂。
  - eg：设计宽度为640px，图片宽高为191px * 67px；（bg设置，而不是img标签）
  - 图片在页面的百分比宽度width：191px / 640px =` 29.84%
  - 图片在页面的百分比高度height：0.2914 * 67 /191 =` 10.47%
  - 计算公式： W（元素当前百分比宽度）/ padding-bottom = 图片真实宽度 / 图片真实高度。
  - 为什么使用padding-bottom？因为height和width的参考对象不同（height的备份比值是以父元素的高度参考计算的，但是在实际中，只有在父元素的高度是一个指定值时，子元素设置的百分比高度才会起作用，否则高度会被充值未auto，设置height没有太多的运用价值），height值无法实现等比例变化，而高度在完全使用padding-bottom或者padding-top撑起来。
  - CSS规范中，margin和padding的百分比值是以其自身父元素的宽度为基础进行计算的。CSS的默认排版的横向的，横向宽度会是一定的，纵向高度是可以无限延展的。
  - eg：一个div元素，宽300px，高度200px，其中包含子元素p，当p的CSS样式为margin：10%，p的margin-top/right/bottom/left分别为多少呢？按常规应该是20px,30px,20px,30px.
  - 但真实值是30px,30px,30px,30px
  - 当改变排版，给p的父盒子div设置-webkit-writing-mode-:vertical-lr; 即横向排版变成纵向。margin参考对象发生改变，从而以父元素的高度为基础进行计算，真实值为：20px,20px,20px,20px；
  - 示例图
  - 【左图为页面渲染结果；中、右图为盒子模型图。】
    - 左1：是横向排版margin10%，
    - 左2：是竖向排版margin10%
    - 左3：是横向排版margin-left：10px；
      中：横向排版margin10%（左1）的盒子模型
      右：竖向排版margin10%（左2）的盒子模型
  - 验证margin参考对象遇到的坑———margin塌陷问题（以下是对margin的塌陷问题和外边距合并现象扩展）：
  - 场景：给div中的p设置margin：10%样式，按常规渲染应该出现如下图的样子。但实际情况却是上面的左1图。【div跟着p一起向下平移了！！】
  - 大盒子包含一个小盒子，小盒子设置margin-top，大盒子会一起向下平移。这就是传说中的margin塌陷问题！
  - 要强调的是外边距的塌陷问题只会在垂直之间产生塌陷；水平之间不受影响的；还有就是两个盒子的垂直外边距完全接触才会触发。
  - margin塌陷问题的原因：
  - 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。【对于有块级子元素的元素计算高度的方式，如果元素没有垂直边框和填充，那其高度就是其子元素顶部和底部边框边缘之间的距离。一个DIV和它的子DIV特别重视垂直边框或填充，也就好像是，一口锅，里面放个盆，能不能扣住里面的盆，主要看锅盖了，垂直边框或填充就是这个“锅盖”。】
  - margin-top是一个距离顶部多少像素的css样式，是用于两个盒子隔离边距用的，margin用于兄弟关系的盒子间距，而padding用于父子级的盒子间距。在编程上，这个其实是没有布好局导致的，需要注意布局方式层级关系。
  - 外边距合并现象：
  - 两个div上下拍咧，上div设置了margin-bottom，下div设置了margin-top，margin会合并，合并之后取较大的值作为两个div之间的间距。
  - margin外边距合并现象不需要解决，设置好值或者取其一即可。margin的塌陷问题是需要解决的，解决方法如下：
    - 给大盒子（父元素）加一个边框border（border：1px solid transparent；或者border-top:1px solid transparent;）但是这样会改变盒模型和设计视图。不是很推荐，除非不影响页面整体效果。
    - 给大盒子（父元素）设置一个overflow：hidden属性
    - 浮动：float:left;
    - 等等，触发BFC（块级格式上下文）。
      - 在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
      - BFC中的元素的布局是不受外界的影响。并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
      - 浮动元素和绝对定位元素，非块级盒子的块级容器（eg： inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC。
- 缩放法
  - 缩放的方式有 Zoom 和 transfrom：scale（）两种
1 . 支持的值类型不一样。Zoom:（百分比值）zoom:50%，表示缩小到原来的一半；（数值）zoom:0.5，表示缩小到原来的一半。zoom:normal 等同于zoom:1。
而 scale 并不支持百分比值和 normal 关键字，只能是数值。但是能负数，可以只控制1个维度。

2 . 相对缩放位置不一样。Zoom 的缩放是相对于左上角的；而scale默认是居中缩放；

3 . Zoom 的缩放改变了元素占据的空间大小（缩放后容器所占据的空间是跟着一起缩放的）；
而 scale 的缩放占据的原始尺寸不变，页面布局不会发生变化（缩放后，容器所占据的空间仍不变，会出现空白区域。）；

4 . Zoom 和 scale 对元素的渲染计算方法可能有差异：zoom:0.5（锐利）； transfrom:scale(0.5)（模糊）；

5 . 对文字的缩放规则不一致。Zoom 缩放依然受限于最小12像素中文大小限制；而 scale 就是纯粹的对图形进行比例控制，文字50%原来尺寸。

6 . 渲染的性能差异明显。由于 Zoom 的缩放会改变元素的真实空间大小，在 dom 中 Zoom 加在任意一个元素上都会引起一整个页面的重新渲染，而 scale 只是在当前的元素上重绘。因为 scale 变化时候，其原本的尺寸是不变的，就没有 layout 的重计算；但是 Zoom 牵一发动全身。
```
//zoom
 (function(fixWidth, id) {
        var ele = document.getElementById(id);
        function setZoom() {
            var cliWidth = document.documentElement.clientWidth || document.body.clientWidth;
            var blWidth = cliWidth / fixWidth;
            ele.style.zoom = blWidth;
        }
        window.addEventListener('resize', setZoom, false);
        setZoom();
    })(640, 'wrap'); //wrap是页面最外层容器的id
```
- - 监听resize事件，窗口大小改变的时候，运行setZoom，第一次运行的时候也设置一次。
  - setZoom函数先获取屏幕分辨率，然后通过设计稿来计算缩放比例。参数为（设计稿宽度640，页面最外层容器id）；
  - 优点：可以按照设计稿尺寸进行页面开发，页面自动个根据浏览器的分辨率进行缩放；
  - 缺点：高度是随着宽度进行缩放比的，所以滑屏布局用缩放来做自适应并不是很有利。
- Rem自适应：
  - 通过js来控制根目录字号
```
(function() { 
    if(window.addEventListener)return;
    var html = document.documentElement;
    function setFont() {
            var cliWidth = html.clientWidth;
            html.style.zoom = blWidth;
        }
    document.addEventListener('DOMContentLoaded',setFont,false)
}
})();
```
rem vs Zoom ？各有千秋择需采用
Zoom兼容PC和移动端，但是某些情况下回因为缩放导致定位出现错乱，并且滑屏的浏览形式不适用。
rem是CSS3的单位，所以在移动端浏览器使用最优，滑屏的尺寸也是可以精确控制的。
- 模块和内容的自适应——适配方法
  - 对于模块：
    - 通过变化元素位置达到减少列数的目的，从而让内容以合适的尺寸显示，适应小屏幕设备。
    - 通过隐藏或展开的方式对模块展示进行改变。
    - 对模块尺寸进行放大或者缩小。
    - 考虑增加或者删减模块的数量。
  - 对于模块中的内容：
    - 考虑挤压或拉伸内容容器的形状。
    - 在内容排版上选择换行或者平铺。
    - 和模块类似，对内容进行增加或者删减。
1.1.5 内容排布技巧
- 视频与iFrame的自适应
  - 计算公式： W（元素当前百分比宽度）/ padding-bottom = 4/3 或16/9 或 16/10
- 水平垂直居中
  - 水平通过绝对定位和margin，对于行内使用text-align：center
  - 垂直居中使用display:box;需要注意的是要带私有前缀：-webkit- -moz-

zhangxiang_1102

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
指尖上行--移动前端开发进阶之路（读书笔记）----1.1页面布局

chapter 1 移动页面开发页面布局页面调试常用库和框架1.1 页面布局1.1.1 Vieport（视口，视图窗口）设备像素物理像素：屏幕分辨率；设备独立像素：CSS像素（eg:IPhone5 CSS像素是320*568px）。像素密度（PPI） PPI = ( 屏幕分辨率宽的平方+屏幕分辨率高的平方 )开根号 / 4 （eg：IPhone5的PPI大于等于326）根据Ap
复制链接

扫一扫