屏幕适配

# 大屏适配

https://cb.btzh.net/tj/tj-big-screen-web

大屏最重要的就是分辨率适配问题，对此我们可以将每个页面中的元素设置为rem来完成页面内元素长宽设置，但是通常我们的设计稿是用px来标注的，我们引入插件帮我们将px全部转为rem。

# 配置

安装 @njleonzhang/postcss-px-to-rem 和 lib-flexible-for-dashboard
index.html

<script inline src='node_modules/lib-flexible-for-dashboard/dist/index.js'></script>
<script>
  dashboardFlexible.init(16/9); // 大屏屏幕长宽比例
</script>

1
2
3
4

配置webpack

  {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in
      // package.json
      loader: require.resolve('postcss-loader'),
      options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
              require('postcss-flexbugs-fixes'),
              require('postcss-preset-env')({
                  autoprefixer: {
                      flexbox: 'no-2009',
                  },
                  stage: 3,
              }),
              require('@njleonzhang/postcss-px-to-rem')({
                  unitToConvert: 'px',
                  widthOfDesignLayout: 1920, // (大屏的实际宽度)
                  unitPrecision: 5,
                  selectorBlackList: ['.ignore', '.hairlines'],
                  minPixelValue: 1,
                  mediaQuery: false
              })
          ],
      }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

或者 vue-cli的项目可以通过.postcssrc.js配置

module.exports = {
  plugins: {
    autoprefixer: {},
    "@njleonzhang/postcss-px-to-rem": {
      unitToConvert: 'px',
      widthOfDesignLayout: 1920, // (Number) The width of the viewport. (大屏的实际宽度)
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false // (Boolean) Allow px to be converted in media queries.
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

页面设置大屏尺寸

body, html {
  /* 大屏宽度 */
  width: 1920px; 
  /* 大屏高度 */
  height: 720px;
  margin: 0;
  position: relative;
}

1
2
3
4
5
6
7
8

# 基于现有vux组件库的移动端适配

https://cb.btzh.net/tj-dlej/tj-dlej-h5/tree/rem-test

# 安装

npm i postcss-plugin-px2rem -D

npm i lib-flexible

1
2
3

# 引入

index.html (***)

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
``

- main.js

```javascript

...

import 'lib-flexible'

...

1
2
3
4
5
6
7
8
9
10
11
12
13

build/webpack.base.conf.js

...
const px2rem = require('postcss-plugin-px2rem')

const px2remOpts = {
  rootValue: 41.4,  // lib-flexible首次在iphone6调试模式生成的字体大小
  unitPrecision: 5,
  propWhiteList: [],
  propBlackList: [],
  exclude:false,
  selectorBlackList: [],
  ignoreIdentifier: false,
  replace: true,
  mediaQuery: false,
  minPixelValue: 0
}

......

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: utils.cssLoaders({
      sourceMap: sourceMapEnabled,
      extract: isProduction
    }),
    cssSourceMap: sourceMapEnabled,
    cacheBusting: config.dev.cacheBusting,
    transformToRequire: {
      video: 'src',
      source: 'src',
      img: 'src',
      image: 'xlink:href'
    },
    postcss: [px2rem(px2remOpts)] /* 添加此项配置 */
  }
}

......

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# web端适配

# 采用媒体查询

CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

screen - 用于电脑屏幕，平板电脑，智能手机等

pc 优先

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

也可以参考bootstrap的参数

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)

# 百分比布局

通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。（vw, vh, %）

# 视口单位

单位	含义
vw	相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh	相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值

用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）。例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。

那么vw或者vh很类似百分比单位。vw和%的区别为：

单位	含义
%	大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
vw/vh	相对于视窗的尺寸

使用视口单位来实现响应式有两种做法：

仅使用vw作为CSS单位

对于设计稿的尺寸转换为为单位，我们使用Sass函数编译

//iPhone 6尺寸作为设计稿基准
$vm_base: 375; 
@function vw($px) {
    @return ($px / $vm_base) * 100vw;
}

1
2
3
4
5

无论是文本还是布局宽度、间距等都使用vw作为单位

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10); // 内间距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10); // 字体大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40); // 宽度
                height: vm(40); // 高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1物理像素线（也就是普通屏幕下1px,高清屏幕下0.5px的情况）采用transform属性scale实现

.mod_grid {
    position: relative;
    &::after {
        // 实现1物理像素的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

对于需要保持宽高比的图片，应该用padding-top实现

.mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

搭配vw和rem

虽然采用vw适配后的页面效果很好，但是它是利用视口单位实现的布局，依赖视口大小而自动缩放，无论视口过大还是过小，它也随着时候过大或者过小，失去了最大最小宽度的限制，此时我们可以结合rem来实现布局

给根元素大小设置随着视口变化而变化的vw单位，这样就可以实现动态改变其大小
限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小（*****）
body {
    max-width: 540px;
    min-width: 320px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 图片响应式

这里的图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。

使用max-width（图片自适应）:

图片自适应意思就是图片能随着容器的大小进行缩放，可以采用如下代码：

img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

1
2
3
4
5

inline-block 元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。 max-width保证了图片能够随着容器的进行等宽扩充（即保证所有图片最大显示为其自身的 100%。此时，如果包含图片的元素比图片固有宽度小，图片会缩放占满最大可用空间），而height为auto可以保证图片进行等比缩放而不至于失真。如果是背景图片的话要灵活运用background-size属性。

那么为什么不能用width：100%呢？因为这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下，图片会被无谓地拉伸。

# Flex弹性布局

链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

# 滚动条

有些组件库组件默认是隐藏掉滚动条的，如果业务需要，可以手动改css代码，使其显示出来。以下是可以修改的滚动条样式：

webkit内核的浏览器(chrome,safari)

/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）
width指竖向滚动条宽度  height指横向滚动条高度
*/
::-webkit-scrollbar{
	width:10px;
	height:10px;
}
/*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
::-webkit-scrollbar-button{
	background:#74D334;
}
/*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
::-webkit-scrollbar-track{
	background:#FF66D5;
}
/*内层轨道，滚动条中间部分（位置4）*/
::-webkit-scrollbar-track-piece{
	background:#FF66D5;
}
/*滚动条里面可以拖动的那部分（位置5）*/
::-webkit-scrollbar-thumb{
	background:#FFA711;
	border-radius:4px;
}
/*边角（位置6）*/
::-webkit-scrollbar-corner {
	background:#82AFFF; 
}
/*定义右下角拖动块的样式（位置7）*/
::-webkit-scrollbar-resizer  {
	background:#FF0BEE;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

效果如下（可根据颜色区分各属性效果）：

IE仅能设置与颜色相关的滚动条样式

scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/
scrollbar-face-color: #ff2ed7; /**//*立体滚动条的颜色*/
scrollbar-3dlight-color: #2fff1b; /**//*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #d40000; /**//*滚动条空白部分的颜色*/
scrollbar-shadow-color: #2cfffd; /**//*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #1a1aff; /**//*立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/
scrollbar-base-color: #ff4857; /**//*滚动条的基本颜色*/

1
2
3
4
5
6
7
8

效果如下（可根据颜色区分各属性效果）：

上次更新: 2022/05/05, 17:47:41

← 浏览器缓存机制前端基础方法汇总→