1.viewport视口

  视口(viewport),是视图窗口的简称。

  视口的大小就是HTML元素的实际大小。

  但是,在移动端要想展示实际页面大小则必须进行视口的适配设置,

  否= 9 n # 6 q F则,移动端加载页面时,默认视口宽度9# { s [ U k ? F !8_ U Z y { 9 y h0px或某个值(布局视口宽度( ( n c* ] * h 6 [ i [,无法呈现实际大小。: L z O #

  说明:

    在桌面显示器上CSS中的1px相当于1个物理像素,但在移动屏幕上由于设备分辨率差异较大,

    可能相同尺寸屏幕的分辨率(像素密度)相差1倍甚至更多,这时CSS中的1px对应的的物理像素

    数量会因设备不同而不同,所以移动端浏览器必须进行viewport适配,才能得到理想的布局效果。

    获取布局视口(layoutviewport)宽度:

      document.documentElement.clientWidth

2.视口适配

 \ b ~ Y o M S = 使用<meta/>标签控制v+ 7 $ D O q niewp2 ] K oort进行适配设置,得到理想视口宽度(idealviewport! 4 R)。

  <meta>元素可以提供关于HTML元素的元数据信息,比如页面描述、搜索关键字、访问频率等。

  <met8 T a 1 % ` ?a>元素属性:

    content,设置或返回&p j v –lt;meta&g\ W ! ^ | % E o xt;元素的content属性的值;

  K ` _ | ?  name,将content属性连接到某个元数据的名称;

    httpEquiv,将content属性连接到某个HTTP头部;

    schemK Q se,设p m l 7置或返回用于解释content属性值的格式。

  ) : , 1 T J ]借助<meta>标签7 R t g进行viewport设置时,name=”viewG _ jport”,而 metacontent的属性值包含以下6个:

    width,设置布局视口(layoutviewport)的宽度,值为正整数 或deviJ ! u z vce-width(设_ H q $ B备屏幕宽度)

    initial-scale,设置页面初始缩放值,值为“0.0-10.0”之间

    minimum-scale,设置最小缩放比例,值为“0.0-10.0”之间,必须小于等于maximum-scale

    maximum-scale,设置D } _ % m最大缩放比例,值为“0.0-10.0”之间,必须大于等于minimum-scale

    height[ j { :,设置布局视口的高度,值为正整数 或device-hC K } E & |eight,一般不需要单独定义

    user-scalable,设置是否允许用户H , w v z Y A / $进行缩放操作,值为 yes/no,默认为“yes”

  语法示例:

    <meta( z Z i )name=”v1 \ Jiewport” contenth * N s b=”ini: 5 M 3 u N Vtial-scale=1.0,width=device-width,其他可选设置”/>

  注意:

    通常,单独设置“initial-scale=1”或者“width=device-width”中的一个都可以得到idealviewport,

    但是,仅设置“width=device-width”时,在id n ? D p q sPhone或iPad上,无论横屏还是竖屏,idealviewport

    都是竖屏时的宽度,而仅设置“initial-scale=1”时,在windowphone的IE浏览器上,idealviewport

    始终是竖% ^ o 2 } { k & W屏时的宽度,当两者同时设置时,浏览器会取二者的值较大的那一个。

3.REM单位

  rem(fontsize) 4 l X Uoftherootelement)是相对于根元素的字体大小按比例进行计算的尺寸单位。

  在响应式布局中,考虑到不同移动o d G R Sg 8 q I # 2 ]的尺寸差异,为确保所有元素所占空间在不同设备上比例相同,

  页面布局需要动2 j 8 s态调整,则通过REM对设备的物理像素和逻辑像素5 h \ R进行动态转换达到布局适配目的O l ` \ ^

  按照REM思想定义根元0 m R ~ n j i 7 3素字体大小时,语法如下:

    document.documentElement.stylem c L [ K.fontSize

    =(document.doc} 8 WumentElement.clien: 5 j 1 , gtWir # ( + 1 x jdth/750)*100+”px”;

    说明:

 l n h q     ⑴上述设置表示将设备宽度进行750等分,再乘以100,得到根元素字体的像素大小。

       所以,在不同尺寸的设备上,根元素字体的大小也/ 2 N q w = @ (就不同,但与设备尺寸的比例是相同的。

      ⑵由于大多数PS设计稿是以iPhone6为标准进行设计的,iPhone6的逻辑像素是375B K P 4 6 % N 7px,而

       它的实际物理像素是满屏宽度的2倍1 x 0 L m,也就是750px,PS设计软件的分辨率和物理像素是

       是1:1的比例,所以为了便于不同设备间按比例缩放转换,将设备宽度进行750等分。

      ⑶J 6 3 _ x t T / F为了避免使用rem单位设置元素大小时小于浏览器默认最小尺寸,如12px、14px等,

       所以将设备宽度750等分后,乘以一个放大系数,使用“100”则是为了方. ^ M便计算。

  代码示例:

<html lang="en">
<head>
<meta chE + O U r Z %arR @ - P [ # oset="UTF-8">
<title>viewport&rem</tn q 2itle>
<meta name='v2 x O j , [iewport' contentc U [ ; h='width=devi@ ~ 1ce-widthX x i = !,initial-scale=1.0,user-scalable=no'>_ s * D r %
<script>
document.documentElement.style.fontSize=(docP e f qument/ Q , Q 1 D |.documeF C A ~ntElement.client7 # r Z | EWidth/750)*100+'px';
&o l \ 5 j L Lltq i E ; \ $ i;/script>+ s = 2
<style>
div{
width: 6rem;heigB $ I % 9 \ h oht: 0.3rem;background-color: #1e7e3x _ ( L `4;
}
</style>
</hea \ \ s I F ~ad, k ! ! @ u>
<body&g7 m 1 X W H B Ut;
<div></div>
<script>
var div=document.querySelectoE 7 i A Z /r('div'_ u 4 L);
console.log(document.documentElement.clientWidth);
console.log(document.a ^ s JdocumentElement.style.fontSize1 3 b & n);
consolei ; V E 0 U.log(div.clientWidth);
console.log(div.c| J - B = 8 V OlientHeight);
</script>
<I S H / * ^ v w/body>
</html>

4.响应式n E d 9 K ; y O i表格案例

<html lang="K ~ * Y E V ten">
<head>
<meta charset="UTF-8">
<title>viewport&rem</title>
<meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no'>
<script>
//页面加载完成后计算“fontSize“值。
window.on_ R ; g ) # n C .load=function(){
doc; Z p \ ^ument.documentElemo K f vent.styH Z s M M B ] E rle.fontSize=(document.documea . U y VntElement.clientWidth/750)*100+'px/ 9 n T V m';
}
//为确保视口尺寸改变后自动计算“fontSize”值,使用window.onresize事件。
window.ont d o . , \resize=function () {
document.documentElement.style.fontSize=(document.documentElement.clientWidt | Y Q o gth/750)*100+D m a y v 6 O E +'px';
}
</script>
<style>
table{
width: 6rem;height: 1rem;font-size: 0.08rem;
border-collapse: collapse;  /* 设置单元格边框折叠,即相邻单元格的边框会合并为单一边框 */
}
</style>
</head>
<body&\ : $ = 3gL + a 6 3 It;
<t~ } x ` O Yable b6 ` d , (order="1px" cellspacing="0" align="center">
<tr>
<!--    设置表名、单元格合并、字体大小、字体加粗、字体间距、表格背景颜色        -->
<th colspan="7" bgcolor="#fafad2"&4 } M G C d 3gt;
第十周课程表
</th>
</tr>
&? V t ( S G y xlt;tr>
<th>星期一</th>
&E / w ! # jlt;th>星期@ X D二</th>
&lD y Y r & Q * Zt;th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<- d Y P N / j a w;tr align="center"&z C ) s mgt;
<td&g5 ( , st;语文</tdx 0 - 5 \ 8 y>
<td>数学</td>
&w ) 4lt;td>英语</td>
<td>政治</td>
<t1 + : C h h V c 1d>历史</td&i M ) j q . Qgt;
<td>体育</td>
<td>美术</td>
</E t H atr>
<q G \ S 7 & q 3;te E Lr alig/ p @ 4 # % ,n="center">
<tdB p 1 h>文学</td>
<td>金融</td>
<td>地里</td>
<td>财经</td>
<td&n L & H , 4 ngt;生物</td>
<td>音乐</td>
<I R X | Y u 7;td>舞蹈</td>
</tr>
</0 @ F } 2 u b Jtable>
</bs 2 7 2 , I )ody>
</hA K X # I - utm| q b + 7 /l>

  知I p d Z z s d识碎片:

    window.onresize事件,视口尺寸发[ [ i 0 ? M生变化时触发

    border-collapse属性,设置相邻单元格边框是否合并

    cellspa) | [ 0 Rcing属性,设置单元格之间的距离

    letter-spacing属性,设置字符之间的距离

    _ S 7 4 J 7 gword-s$ I N H Qpacing属性,设置字体之间的距离

  测试结果:

  

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注