移动Web_流式布局（百分比布局）

writer：late at night code peasant

1（百分比布局)

?核心知识点

1.流式布局（百分比布局）

2.视口设置

?今日目标

1. 能够使用流式布局完成jd页面的制作

?移动端一些概念介绍【了解为主】

屏幕尺寸

指的是屏幕对角线的长度

设备大小（物理像素）

例如:  1366 * 768 px
指的是在水平方向有1366个像素点,在垂直方向有768个像素点

像素密度(PPI)

概念:
    每英寸所能容纳像素点的个数  (像素密度越大,画面越精细,反之越粗糙)
备注:
    1. 屏幕尺寸固定大的时候,像素密度越高,单位的像素越小,反之单位像素大小越大
    2. 像素密度一般指 PPI 或者 DPI(在安卓设备上常用)

设备独立像素(了解)

保证在不同设备上,让用户看到的元素大小一样.
?
设备独立像素本质上就是一个比例关系,不同设备有不同的比例关系如下图:
?
备注: 可以通过js 中 window.devicePixelRatio 获取到当前设备的值

设备	尺寸(英寸)	开发尺寸(px)	物理像素比(dpr)
iphone3G	3.5	320*480	1.0
iphone4/4s	3.5	320*480	2.0
iphone5/5s/5c	4.0	320*568	2.0
HTC One M8	4.5	360*640	3.0
iphone6	4.7	375*667	2.0
Nexus 4	4.7	384*640	2.0
Nexus 5x	5.2	411*731	2.6
iphone6 Plus	5.5	414*736	3.0
Samsung Galaxy Note 4	5.7	480*853	3.0
Sony Xperia Z Ultra	6.4	540*960	2.0
Nexus 7 (‘12)	7.0	600*960	1.3
iPad Mini	7.9	768*1024	2.0

• https://material.io/devices/ ,一个设备尺寸统计网站

• 作为前端开发不建议大家去纠结独立设备像素,像素密度,了解即可.因为它们对我们的开发没有帮助

?2倍图

作用:
    保证在不同设备上图片都能正常显示(不会模糊显示)

?视口(viewport)[理解]

用来约束网站中最*块元素HTML大小
?
用来预览网页的一个窗口
?
        PC:  在PC端用来浏览网页的窗口(视口),指的就是我们的浏览器或者屏幕
?
        注意:
             在PC端网页布局过程中,网页布局会受视口(浏览器大小,屏幕大小影响)
?
     移动端:  
            1. 在移动设备上,网页布局不会再受移动设备屏幕尺寸大小的影响
            2. 在移动设备上,视口不再是当前设备屏幕大小(浏览器大小)
            3. 在移动设备上,视口是可以通过程序员自己自定义的,默认视口大小: 980px , 1024px

PC视口

? 在PC端,浏览器窗口大小会影响HTML大小,进而影响网页布局
? 在PC端视口其实就是我们浏览器大小(在PC端,视口可以影响HTML元素大小)

移动视口

注意: 
    1.在移动设备上,视口不再受浏览器窗口大小影响(在移动设备上浏览器窗口的大小不能影响HTML元素大小)
    2.允许开发者自定义视口的大小,通常设备会有一个默认的视口大小

流式布局（百分比布局）

 给盒子设置宽度为百分比
?
 作用： 防止页面在水平方向出现滚动条

屏幕适配(掌握)

网页不能出现滚动条和缩放.(控制缩放)
?
解决方式: 通过<meta  name = "viewport"  content = ""> 设置就可以控制
?
? <meta name="viewport" content="width=device-width">  
width=device-width    宽度等于当前设备宽度,满足多个终端
?
? <meta name="viewport"  content="initial-scale=1"> 
initial-scale=1   不缩放
?
? <meta name="viewport" content="user-scalable=0">
 user-scalable=0  禁止用户缩放
 
? <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

其他部分

文字超出父元素显示省略号

    /* 设置超出部分的显示方式 */
    overflow: hidden;
    /* 文字溢出显示省略号 */
    text-overflow: ellipsis;
?
    /* 用来控制显示行数 */
    -webkit-line-clamp: 2;
    /* 文字显示方式,默认水平 */
    -webkit-box-orient: vertical;
    /* 将盒子转为弹性盒子 */
    display: -webkit-box;

max-width,min-width属性介绍

Web前端_流式布局（百分比布局）