关于chrome:JSCSS自适应屏幕

47次阅读

共计 763 个字符,预计需要花费 2 分钟才能阅读完成。

布局适配形式

  • Media Query(媒体查问):当初比拟支流的适配计划,可依据视口不同编写不同款式达到适应成果,比方框架 Bootstrap,它能实现大部分我的项目需要,然而编写过于简单。
  • flex 布局:支流的布局形式,不仅实用于挪动 Web,网页上也体现良好,也是当初应用最多的布局形式。
  • 固定高度,宽度百分比:这种办法只适宜简略要求不高的 webApp,个别在适应要求不高,或者大屏显示没有要求时候能够应用。

rem 单位介绍
rem(font size of the root element)是绝对长度单位。绝对于根元素(即 html 元素)font-size 计算值的倍数

  • 原理:将 px 替换成 rem,在脚本中应用 JS 动静批改 html 的 font-size 适配,它能够依据根视口大小去扭转基准元素的字体,而后进行等比缩放来进行变动,达到各种屏幕适应。

管制的 JS 写法

var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; // 获取屏幕的宽度
// 获取 HTML 的 Dom 元素
var htmlDom = document.getElementsByTagName('html')[0];
// 设置根元素字体
htmlDom.style.fontSize= htmlWidth/20 + 'px';

这种形式目前罕用于 webapp 上,次要是应用 rem 个性来灵便扭转字体大小,达到窗口大小扭转等比缩放元素。

拓展局部:

目前在自适应这块像对于互联网电视,因为开发时候对图片尺寸是有严格要求,因而,集成时候只须要设置视口大小就能够对任何屏幕进行等比缩放。
个别会在 meta 标签中间接设置开发时候基准的大小
<meta name="page-view-size" content="1920*1080" />

正文完
 0