当前位置：移动技术网 > IT编程>网页制作>CSS > 移动端适配布局(设备像素,独立像素和css像素的区别,以及自适应适配方案)

移动端适配布局(设备像素,独立像素和css像素的区别,以及自适应适配方案)

2020年07月14日 | 移动技术网IT编程 | 我要评论

移动适配布局

1. 像素

1.1 设备像素

显示器的最小物理单位(显示器是固定的).
以手机屏幕为列,设备像素是真实的像素点,以iPhone 6/7/8高清屏为列,它的设备像素是750*1334.
通常说的4K显示屏指的是4096*2160.
我们通常说的手机分辨率是根号下手机宽度^2 +手机高度^2

1.2 设备独立像素

设备独立像素就是出厂时的像素,可以通过
window.screen.width
window.screen.height
以手机屏幕为列,设备独立像素是规定的像素点,以iPhone 6/7/8高清屏为列,它的设备像素是375*667.

1.3 css像素

CSS 中的长度单位，在 CSS 中使用的 px 都是指 CSS 像素.
在页面不缩放的情况下，1px的CSS像素 === 1设备独立像素.
页面放大200%时，页面的设备独立像素依旧不变，放大的是CSS像素。但是此时CSS像素与设备独立像素的关系变化了，1px === 4独立像素（宽x2，高x2).
CSS中px是相对单位.

1.4 PPI

PPI指每英寸的物理像素
以尺寸为6英寸（屏幕对角线长度）屏幕对角线上的像素点 / 对角线的英寸数

1.5 devicePixelRatio设备像素比(dpr)

devicePixelRatio指的是设备像素和设备独立像素的比,即1独立像素由多少物理像素渲染.
window.devicePixelRatio = 物理像素/独立像素

1.6 解决移动端1像素的问题

因为不同设备具有不同的dpr 所以,css1px 所代表的设备像素不同, 所以在有些设备上看到的粗,有些设备看到的细,解决一像素边框问题.
方法一
通过媒体查询,查询设备的dpr,根据dpr设置不同的宽度大小.

.box{
    height: 200px;
    border-bottom:1px solid red;

}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .box { border-bottom: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .box{ border-bottom: 0.333333px solid blue }
}

缺点: 小数像素目前兼容性较差，一些以前的版本可能不支持。(理论上最小的单位是 1px。所以会出现有的设备写 0.5px 无效（没有边框）的情况。)
方法二
借助伪元素缩放处理.

.box:after{
    content: "";
    display: block;
    height: 0;
    border-top: #999 solid 1px;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleY(0.5); /* 将 1px 的线条缩小为原来的 1/2 */
}

方法三

借助媒体查询和伪元素缩放来解决(可以用less来写)

// 定义mixin
.border-1px(@color: rgba(7,17,27,0.2)){
    position:relative;
    &:after{
        display:block;
        position:absolute;
        left:0;
        bottom:0;
        content:'';
        width:100%;
        border-top:1px solid @color;
    }
}

// 根据不同的dpr 使用不同的缩放
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
    .border-1px {
        .border-1px();
        &:after {
            -webkit-transform: scaleY(0.7);
            -moz-transform: scaleY(0.7);
            -ms-transform: scaleY(0.7);
            -o-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
    .border-1px {
        .border-1px();
        &:after {
            -webkit-transform: scaleY(0.5);
            -moz-transform: scaleY(0.5);
            -ms-transform: scaleY(0.5);
            -o-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    .border-1px {
        .border-1px();
        &:after {
            -webkit-transform: scaleY(0.3);
            -moz-transform: scaleY(0.3);
            -ms-transform: scaleY(0.3);
            -o-transform: scaleY(0.3);
            transform: scaleY(0.3);
        }
    }
}

2. viewport(视口)

2.1 什么是视口

在移动端viewport视口就是浏览器显示页面内容的屏幕区域,在viewport中有两种视口,分别表示为 : visual viewport (可视视口) 和 layout viewport (布局视口),两个视口是叠加在一起的.
visual viewport 固定大小跟屏幕大小相同, 可以通过window.innerWidth来获取.
layout viewport 可改变大小, 默认大小为980像素, 可以通过document.documentElement.clientWidth获取
视口默认的宽度是980px,我们可以用meta标签来束缚视口宽度.

2.2 视口设置

通过<meta>标签进行设置,name属性指定viewport的值,content属性进行视口配置.

取值	含义
width	设置layout view的宽度为特定值 device-width表示设备的宽度
height	设置layout view的宽度为特定值,一般不设置
initial-scale	设置页面初始缩放
minimum-scale	设置页面最小缩放
maximum-scale	设置页面最大缩放
user–scalable	设设置页面能否缩放

3. 适配

3.1为什么要适配

了适应各种移动端设备，完美呈现应有的布局效果
各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放.

现在主流的开发思路

PC端和移动端分开开发
如果想在既能适应PC、又能适应移动端响应式开发.

3.2 自适应适配方案

3.2.1 em,rem,vw/wh(单位认识)

em: 相对单位, 1em等于当前元素的font-size值的1倍.
rem 相对单位 r -> root 根节点( html ) 根据html的字体大小计算其他元素尺寸 1rem 就是html的font-size值
vw/vh ; 把屏幕(即浏览器可视区域)分为100份, 1vw就等于屏幕宽度的1%.

3.2.2 媒体查询

meida queries的方式可以说是早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

优点

方法简单，成本低，特别是对移动和PC维护同一套代码的时候。
调整屏幕宽度的时候不用刷新页面即可响应式展示.

缺点

代码量比较大，维护不方便.
为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

3.2.3 百分比与Flex布局

布局的特性: 关键元素高宽和位置都不变，只有容器元素在做伸缩变换.
这种布局是一种典型的弹性布局.
布局方式:

局盒子采用百分比.
容器盒子与文字采用固定大小.
Flex 确定位置(也可以采用浮动).

优缺点

好处: 大屏下可以展示更多内容.
坏处: 宽屏下比例会比较不协调 .

注意: 这种情况css尺寸单位用px就好，不要用rem，避免增加复杂度。

3.2.4 rem布局

布局的特性: 关键元素盒子大小与文字都随着屏幕大小不同,而展示不同的大小

布局的方式:

根据屏幕大小不同设置html不同的字体大小.
所有的盒子尺寸和文字大小采用rem的布局方式.

动态设置font-size
设置方式

var fontSize= document.documentElement.clientWidth /3.75;
document.documentElement.style.fontSize = fontSize + 'px';

字体也可以不使用rem单位(通常也不建议字体用rem单位), 采用不同的媒介方式,

@media screen and (max-width:321px){
    .basesize{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .basesize{font-size:16px}
}

@media screen and (min-width:400px){
    .basesize{font-size:18px}
}

如果只是希望盒子根据屏幕大小不同而改变, 但是文字大小不改变,可以在body重新固定文字大小.

body{
    font-size:16px;
}

3.2.5 缩放布局

固定高度宽度.文字大小，通过改变缩放比例适配.
根据屏幕的分辨率动态设置适配缩放比例，达到等比缩放的功能.
根据dpr来设置不同的viewport缩放比例.

// 改变视口的缩放比例
(function(){
    // 方法一
    var width = window.screen.width;
    var fixedW = 375;
    var scale = width / fixedW;
    var meta = document.createElement('meta');
    meta.setAttribute('name','viewport');
    meta.setAttribute('content',`width=${fixedW},initial-scale=${scale},minimun-sacle=${scale},maximun-scale=${scale},user-scalable=no`);
    document.head.appendChild(meta);
})()

3.3 通过vw设置 html 字体

以iphone6为例375px=100vw 1vw = 3.75px.
如果我希望 html的字体大小是100px

html{
    font-size:26.6666667vw;
}

如果切换到iphone 6plus 1vw = 4.41px

注意, 要给body重置一下font-size: 16px;

3.4 固比固

三栏布局,

利用box-sizing

#box{
    position: relative;
    width: 100%;
    height: 60px;
}
#box .left{
    position: absolute;
    top: 0;
    left: 0;
    width:60px;
    height: 100%;
    background-color: red;
}
#box .content{
    width: 100%;
    height: 100%;
    background-color: blue;
    padding:0 60px;
    box-sizing:border-box;
}
#box .right{
    position: absolute;
    top: 0;
    right: 0;
    width:60px;
    height: 100%;
    background-color: yellow;
}

利用flex

#box{
    width: 100%;
    height: 60px;
    display:flex;
}
#box .left{
    width:60px;
    height: 100%;
    background-color: red;
}
#box .content{
    flex:1;
    height: 100%;
    background-color: blue;
}
#box .right{
    width:60px;
    height: 100%;
    background-color: yellow;
}

3.4.1 置高度按比例变换

不设置高度
盒子不设置高度,图片宽度100%,高度默认按比例缩放.
采用padding-top给盒子设置自动,然后用背景图. 借用padding-top来处理,我们知道padding也可以显示背景.

width: 60%;
height: 0;
padding-top:60%;

padding-bottom也可以但是,padding-top更好一点 ,因为可以overflow:hidden ;关闭超出的部分.

3.通过js

var boxWidth = parseInt(getComputedStyle(box)['width']);
box.style.height = boxWidth+'px';

viewport 解析 meta解析
https://gs.statcounter.com/browser-market-share浏览器使用占比

本文地址：https://blog.csdn.net/weixin_46032850/article/details/107290686

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

使用css样式，制作表格（小程序）

效果图：wxml:<view class="table-wrap"><view class="... [阅读全文]
清除新版Google Chrome浏览器中表单控件（input，button...）默认的黑色边框

今天在chrome浏览器上测试项目时，突然发现所有的表单控件都被加上了一个奇怪的黑色边框，翻了半天css文件后，... [阅读全文]
4.3 人脸融合应用程序的设计

文章目录4.3 人脸融合应用程序的设计4.3 人脸融合应用程序的设计ManyMasks软件打开之后,将展现一个实... [阅读全文]
LeetCode解析------155.最小栈-设计

题目：设计一个支持 push ，pop ，top 操作，并能在常数时间内检索到最小元素的栈。push(x) ——... [阅读全文]
4.复杂选择器、权重计算、css基础属性

CSS权重!importantInfinity行间样式1000id100class/属性/伪类10标签/伪元素1... [阅读全文]
荐 20200714——git/mac配置/项目运行步骤/一些报错

分布式：GIT工作模式下，每个开发者（安装了git客户端）的电脑就等同于传统SVN服务器svn工作模式：co... [阅读全文]
antd 菜单组件使用时报错：Cannot read property ‘isRootMenu‘ of undefined

项目中使用了antd ui框架，在使用Menu组件得SubMenu组件时报出以下错误：Uncaught Type... [阅读全文]
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来

div的style="background-image: url(img/a.bmp)图片显示不出来首先我的di... [阅读全文]
硬件仪表盘账号建立指导（一） --WHQL认证测试结果提交账号（一）

WHQL提交账户建立指南建立Microsoft 帐户如果你有hotmail，outlook，OneDriver，... [阅读全文]
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系

前些天在开发中遇到了关于浏览器cookie的一些小细节问题。例如：我创建的一个小购物车的web项目。用ngi... [阅读全文]

网友评论


验证码：