JS+CSS 自适应屏幕
SegmentFault
共 982字,需浏览 2分钟
· 2021-02-10
布局适配方式
现在比较主流的适配方案,可根据视口不同编写不同样式达到适应效果,比如框架Bootstrap,它能完成大部分项目需求,但是编写过于复杂。
主流的布局方式,不仅适用于移动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标签中直接设置开发时候基准的大小
评论
PHPCodeIgniter屏幕自适应权限管理系统
提供用户对应多角色的权限管理系统,兼容手机网页端,除了权限管理,还内含通用上传模块,只要在系统建立上传参数,即可任意表单上调用,不需要再写上传程序。技术要求:底层框架CodeIgniter3.0php
PHPCodeIgniter屏幕自适应权限管理系统
0
SDAutoLayout-CellCell 高度自适应
SDAutoLayout(一行代码搞定自动布局!) QQ交流群:497140713(已满) 5194
SDAutoLayout-CellCell 高度自适应
0
adaptive-tab-bar自适应选项卡
AdaptiveController是一个会“逐步简约”的SwiftUI模块,可以给原生或是自定义iOSUI元素增加自定义的状态。UI元素会随着时间推移而产生变化,变化的时候用户已经习惯它们。控件导入
adaptive-tab-bar自适应选项卡
0
SDAutoLayout-CellCell 高度自适应
SDAutoLayout(一行代码搞定自动布局!)QQ交流群:497140713(已满)519489682(新开),github地址s://github.com/gsdios/SDAutoLayout
SDAutoLayout-CellCell 高度自适应
0
SDCellAutoHeightcell 高度自适应
使用SDAutoLayout(Github地址:https://github.com/gsdios/
SDCellAutoHeightcell 高度自适应
0