博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
网页自适应的几种方式。
阅读量:6871 次
发布时间:2019-06-26

本文共 887 字,大约阅读时间需要 2 分钟。

微信小程序的像素大小使用rpx,rpx换算px屏幕宽度/750。

传统的自适应布局有几种:

响应式,根据屏幕大小配置多个样式文件。

使用em,rem.rem是页面的font-size尺寸,不同的页面设置不同的font-size。

(function winInitFontSize(){            window.onresize = initFontSize;            function initFontSize(){                var winWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;                //rem的基数设置大一点,可以减少误差                document.getElementsByTagName("html")[0].style.fontSize = ((winWidth > 750 ? 750 : winWidth)/750) * 100 + 'px';            }            initFontSize();        })();

使用百分比或者flex,铺满屏幕,高度字体还使用px.

scale通过拉伸缩小页面自适应。直接写死viewport的宽度。这种方式不可以设置minimum-scale=1.0。

使用类似rpx的方式:

width: calc((100vw / (750/16)) - 0.1px);  height: calc((100vw / (750/30)) - 0.1px);

假如利用sass倒是可以设置变量,不用一条一条这样写。只是这种在浏览器中,有时会大得可怕。因为100是浏览器的宽度,而不是可使用的宽度。而将100vw写成100%会不起效果。可能100%是动态的,导致不起作用。

有新的收获了再来更新文档。

 

转载于:https://www.cnblogs.com/wlxll/p/7978478.html

你可能感兴趣的文章
别伤了虚拟桌面管理员的"心"
查看>>
yum安装lamp
查看>>
[Unity 3D] Unity 3D 性能优化 (一)
查看>>
Disabling OOM killer on Ubuntu 14.04
查看>>
VBS备份脚本
查看>>
CentOS 6.5 自动安装镜像
查看>>
Storm与Spark Streaming比较
查看>>
我的友情链接
查看>>
Exchange Server 运维管理01:Exchange中Active Directory 有什么用?
查看>>
linux系统管理之四:服务状态
查看>>
VMware View FAQ[一]
查看>>
【原创翻译】布尔值(boolean)
查看>>
三元运算式、lambda表达式、内置函数map、reduce、filter以及yield生成器
查看>>
MySQL分库分表分表后数据的查询(5th)
查看>>
iOS-点击图片放大,再次点击返回原视图 类似查看相册的功能
查看>>
JAVA -- stateless4j StateMachine 使用浅析(二)
查看>>
oracle checkpoint
查看>>
KVM虚拟化开源高可用方案(六)ISCSI ON DRBD搭建及常见故障处理
查看>>
android device related
查看>>
iOS 6 Beta3即将发布,iPhone面板谍照已经曝光
查看>>