经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
WEB前端第六十九课——viewport、rem单位
来源:cnblogs  作者:后来喵  时间:2021/5/10 8:59:00  对本文有异议

1.viewport视口

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

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

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

  否则,移动端加载页面时,默认视口宽度980px或某个值(布局视口宽度),无法呈现实际大小。

  说明:

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

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

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

    获取布局视口(layout viewport)宽度:

      document.documentElement.clientWidth

2.视口适配

  使用<meta/>标签控制viewport进行适配设置,得到理想视口宽度(ideal viewport)。

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

  <meta>元素属性:

    content,设置或返回<meta>元素的content属性的值;

    name,将content属性连接到某个元数据的名称;

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

    scheme,设置或返回用于解释content属性值的格式。

  借助<meta>标签进行viewport设置时,name="viewport",而 meta content的属性值包含以下6个:

    width,设置布局视口(layout viewport)的宽度,值为正整数 或 device-width(设备屏幕宽度)

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

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

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

    height,设置布局视口的高度,值为正整数 或 device-height,一般不需要单独定义

    user-scalable,设置是否允许用户进行缩放操作,值为 yes/no,默认为“yes”

  语法示例:

    <meta name="viewport" content="initial-scale=1.0,width=device-width,其他可选设置"/>

  注意:

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

    但是,仅设置“width=device-width”时,在iPhone或iPad上,无论横屏还是竖屏,ideal viewport

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

    始终是竖屏时的宽度,当两者同时设置时,浏览器会取二者的值较大的那一个。

3.REM单位

  rem(font size of the root element)是相对于根元素的字体大小按比例进行计算的尺寸单位。

  在响应式布局中,考虑到不同移动端的尺寸差异,为确保所有元素所占空间在不同设备上比例相同,

  页面布局需要动态调整,则通过REM对设备的物理像素和逻辑像素进行动态转换达到布局适配目的。

  按照REM思想定义根元素字体大小时,语法如下:

    document.documentElement.style.fontSize

    =(document.documentElement.clientWidth/750)*100+"px";

    说明:

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

       所以,在不同尺寸的设备上,根元素字体的大小也就不同,但与设备尺寸的比例是相同的。

      ⑵由于大多数PS设计稿是以iPhone6为标准进行设计的,iPhone6的逻辑像素是375px,而

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

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

      ⑶为了避免使用rem单位设置元素大小时小于浏览器默认最小尺寸,如12px、14px等,

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

  代码示例:

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>viewport&rem</title>
  5. <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no'>
  6.  
  7. <script>
  8. document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
  9. </script>
  10. <style>
  11. div{
  12. width: 6rem;height: 0.3rem;background-color: #1e7e34;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div></div>
  18. <script>
  19. var div=document.querySelector('div');
  20. console.log(document.documentElement.clientWidth);
  21. console.log(document.documentElement.style.fontSize);
  22. console.log(div.clientWidth);
  23. console.log(div.clientHeight);
  24. </script>
  25. </body>
  26. </html>

4.响应式表格案例

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>viewport&rem</title>
  5. <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no'>
  6.  
  7. <script>
  8. //页面加载完成后计算“fontSize“值。
  9. window.onload=function(){
  10. document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
  11. }
  12. //为确保视口尺寸改变后自动计算“fontSize”值,使用window.onresize事件。
  13. window.onresize=function () {
  14. document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
  15. }
  16. </script>
  17. <style>
  18. table{
  19. width: 6rem;height: 1rem;font-size: 0.08rem;
  20. border-collapse: collapse; /* 设置单元格边框折叠,即相邻单元格的边框会合并为单一边框 */
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <table border="1px" cellspacing="0" align="center">
  26. <tr>
  27. <!-- 设置表名、单元格合并、字体大小、字体加粗、字体间距、表格背景颜色 -->
  28. <th colspan="7" style="font-size: 0.12rem;font-weight: normal;letter-spacing: 0.06rem" bgcolor="#fafad2">
  29. 第十周课程表
  30. </th>
  31. </tr>
  32. <tr>
  33. <th>星期一</th>
  34. <th>星期二</th>
  35. <th>星期三</th>
  36. <th>星期四</th>
  37. <th>星期五</th>
  38. <th>星期六</th>
  39. <th>星期日</th>
  40. </tr>
  41. <tr align="center">
  42. <td>语文</td>
  43. <td>数学</td>
  44. <td>英语</td>
  45. <td>政治</td>
  46. <td>历史</td>
  47. <td>体育</td>
  48. <td>美术</td>
  49. </tr>
  50. <tr align="center">
  51. <td>文学</td>
  52. <td>金融</td>
  53. <td>地里</td>
  54. <td>财经</td>
  55. <td>生物</td>
  56. <td>音乐</td>
  57. <td>舞蹈</td>
  58. </tr>
  59. </table>
  60. </body>
  61. </html>

  知识碎片:

    window.onresize事件,视口尺寸发生变化时触发

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

    cellspacing属性,设置单元格之间的距离

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

    word-spacing属性,设置字体之间的距离

  测试结果:

  

原文链接:http://www.cnblogs.com/husa/p/14704158.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号