浅谈-web屏幕适配的解决方案

时间  2019-11-05
标签 浅谈 web 屏幕 适配 解决 方案 栏目 HTML 繁體版
原文   原文链接

浅谈-web屏幕适配的解决方案

img

就目前看来，web的屏幕适配是贯穿整个前端行业的，如常见的PC端，移动端，响应式，小程序等。javascript

1562402019217

PC端

特色

PC端的屏幕具有如下特色：css

  1. 屏幕大小通常是大于 13.3英寸
  2. 用户会常常拖拉浏览器的大小

1562399024495

缘由

正是由于 PC端上的浏览器大小会常常被改变，并且改变的范围还很大，用户会全屏浏览器，用户也会缩小浏览器到一个很小的值，如600px左右。 因此pc端上若是使用流式布局(百分比布局)，会致使页面很难看。html

img

解决

因此，PC端上只能经过版心布局来解决这种状况。前端

  • 当屏幕大于版心宽度时，版心居中显示
  • 当屏幕小于版心宽度时，屏幕出现一个横向的滚动条，这种方案几乎全部的PC端网站都在采用。

案例

img

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>版心布局</title>
  <style> * { margin: 0; padding: 0; box-sizing: border-box; } html,body{ height: 100%; background-color: #ccc; } main{ width: 1200px; height: 100%; margin: 0 auto; font-size: 40px; background-color: pink; } header{ height: 80px; background-color: aqua; } </style>
</head>

<body>
  <main>
    <header>版心</header>
    <section>内容</section>
  </main>
</body>
</html>
复制代码

效果

1562400533725

移动端

特色

移动端下的屏幕存在如下特色：java

  • 屏幕相比较于PC端要小
  • 浏览器不PC端，随时各类调整大小

缘由

移动端因为屏幕总体比PC端小，并且也不能出现拖动浏览器来调整大小的状况，因此在移动端上的布局是流式布局最多，其中有些小分支，如固定小版心。css3

解决

流式布局，也叫作百分比布局，指的是页面上大部分的容器和元素的宽度都不是定死，多是 百分比单位，也多是rem单位nginx

案例

2019-04-30090218

代码

普通的图片和容器，写单位的时候换成 百分比 或者 flex便可。git

对于页面中的某些元素，如字体大小，可使用 淘宝 flexibile + rem 的解决方案github

淘宝flexibleweb

普通的流式布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>流式</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #ccc; } ul { list-style: none; display: flex; height: 100px; } li { flex: 1; border: 1px solid #000; background-color: aqua; } </style>
</head>

<body>
  <main>
    <section>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </section>
  </main>
</body>

</html>
复制代码

效果

2019-04-30090218

淘宝flexible + rem

flexible 和flex布局不要紧 老婆和老婆饼 也没有关系

这个解决方案是能够和以上的流式布局搭配使用的，rem的做用是主要是针对字体实现 跟随屏幕变化而变化

  1. rem css单位，相对长度，它的值等于根标签的字体大小如

    <style> html { font-size: 100px; } div { /* 相对于 100px */ font-size: 1rem; } </style>
  <div>
    rem单位
  </div>
复制代码

    效果

    1562403035527

  2. 淘宝flexible

    1. 是手淘团队出的一个处理移动端rem设置的js库
    2. 把根标签的字体大小改为了 当前屏幕的十分之一大小
    3. 根标签的字体大小发生改变了，使用了rem单位的元素或者字体大小也跟着改变

流程

1562486744388

flexible代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>版心布局</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <script> (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); </script>
  <style> * { margin: 0; padding: 0; box-sizing: border-box; } </style>
</head>

<body>
  <div>

  </div>
  <script> window.onload = function () { setFont(); window.addEventListener("resize", function () { setFont(); }) function setFont() { var div = document.querySelector("div"); div.style.fontSize = document.querySelector("html").style.fontSize; div.innerHTML = "html的字体大小为" + document.querySelector("html").style.fontSize; } } </script>
</body>

</html>
复制代码

flexible效果

2019-04-30090218

综合flexible 和 rem

根据以上的特色

  • flexible 把 根标签字体大小改成 屏幕的十分之一
  • rem 能够根据根标签的字体大小改变而发生改变

得出如下解决方案

  1. 假定设计稿的宽度 是 640px

  2. 根标签的字体大小为 64px 也就是 1 rem = 64px => 1px=1/64rem

  3. 原设计稿中的div大小为100px，字体大小为100px

  4. 将px单位修改成 rem单位

    div{
	width:100px;
	font-size:100px;
}
修改成
div{
	width:calc( 100rem / 64 );
	font-size:calc( 100rem / 64 );
}
复制代码

  5. 将设计稿的宽度也抽象出去

    div{
	width:calc( 100rem / 十分之一的设计稿宽度 );
	font-size:calc( 100rem / 十分之一的设计稿宽度 );
}
复制代码

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>版心布局</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <script> (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); </script>
  <style> * { margin: 0; padding: 0; box-sizing: border-box; } div { width: calc(100rem / 64); height: calc(100rem / 64); font-size: calc(100rem / 64); background-color: aqua; } </style>
</head>

<body>
  <div>

  </div>
  <script> window.onload = function () { setFont(); window.addEventListener("resize", function () { setFont(); }) function setFont() { var div = document.querySelector("div"); div.style.fontSize = document.querySelector("html").style.fontSize; div.innerHTML = "html的字体大小为" + document.querySelector("html").style.fontSize; } } </script>
</body>

</html>
复制代码

最终效果

2019-04-30090218

小版心

小板心的作法其实也是流式布局中的一种，只不过对最外层容器加了一个最大宽度的设置如

main{
	max-width:540px;
}
复制代码

参考

2019-04-30090218

小程序端

小程序端能够理解特殊的移动端，只不太小程序端不存在 rem这个单位，取而代之的是 rpx 这个单位，翻译就是响应式像素，功能相似 rem

特色

小程序中不须要引入淘宝flexible这个库，由于内置的 rpx 单位就是实现了 rem + fleixible 功能。

小程序中，存在 屏幕的宽度 统一为 750 rpx 所以：存在如下关系。

屏幕宽度 换算关系 px 和 rpx
750 px 1 px = 1 rpx
375 px 1px = 2 rpx
any px 1 px = any / 750 rpx

代码

如 设计稿为 375px，其中存在一个view 宽度高度均为 100px ，字体大小 为 100px

view {
      width: 200rpx;
      height: 200rpx;
      font-size: 200rpx;
      background-color: aqua;
    }
    
    <view> 小程序rpx </view>
复制代码

vw 和 vh

在移动端中，还存在如下单位，也很好用，能够很方便解决问题。

单位 名称
vw 100vw 等于 视口的宽度
vh 100vh 等于 视口的高度
vMax vw 和 vh 中的较大的那个
vMin vw 和 vh 中的较小的那个

以上单位 在移动端中，或者在小程序中都支持。

设计稿为 375px，存在一个大小为100px的div，字体大小也为100px。

  1. 375px = 100 vw 那么 1 px = 100vw / 375
  2. 所以 100px = 100vw * 100 / 375;

代码

注意 calc的语法比较严格 尤为注意空格

main {
      background-color: pink;
      width: calc(100vw * 100 / 375);
      height: calc(100vw * 100 / 375);
      font-size: calc(100vw * 100 / 375);
    }
复制代码

响应式布局

响应式的概念分为两大类

  1. 一种是后端响应式
  2. 一种是前端响应式

后端响应式

后台服务器根据前端浏览器的User-Agent来判断来源请求是PC端仍是移动端，而后服务器动态返回PC端页面或者移动端页面。nginx中很容易就出现该功能。京东，天猫，淘宝也是这样子的。

前端响应式

主要是指经过媒体查询来实现。

前端写好一套代码 html + css + javascript ，就能够冬天的根据屏幕的宽度来改变页面的样式

这种作法体验不是最好，可是倒是最小的代码实现了 兼容pc端和移动端。通常是对页面要求不高或者小企业使用。

因为还要兼容到pc端，因此通常作响应式页面 不会用过高级的h5 css3 的技术。

案例

如 实现一个 大屏幕下 一行显示3列，小屏幕下 一行显示2列。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style> * { margin: 0; padding: 0; box-sizing: border-box; } ul { overflow: hidden; } li { float: left; height: 100px; border: 1px solid #000; background-color: pink; } /* 大屏幕 */ @media screen and (min-width:800px) { li { width: 33.33%; } } /* 小屏幕 */ @media screen and (max-width:800px) { li { width: 50%; background-color: lawngreen; } } </style>
</head>

<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
</body>

</html>
复制代码

效果

2019-04-30090218

其余

业内要实现响应式布局时，通常会使用 推特公司的 bootstrap 框架，好评度很高，并且还针对ie8 作了兼容处理。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程