Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

triunity/setunit

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

setunit

移动端屏幕自适应方案。

原理:

屏幕宽度十等分,一份即一个长度单位,为了方便说明,单位代号d。假设以iPhone6为基准,将设计图的长度单位(px)转换为一份长度单位(d),即750px = 10d,1d = 75px,iPhone6设计图中长度值除以75,便可转换单位。在纷繁的移动设备中,如果浏览器支持viewport unit,1d是10vw,设置根元素字号为10vw,1rem即1d;如果浏览器不支持viewport unit,1d是设备屏幕宽度除以10计算的px值,设置根元素字号为某值px,1rem即1d。得到1rem即设备屏幕宽度十分之一长度。

使用:

编译项目src目录下setunit.ts,在项目dist目录下得到setunit.js,有适配需求的页面引入setunit.js;页面样式中,单位使用rem,1rem是基准设计图屏幕宽度的十分之一,也是实际渲染窗口宽度的十分之一。

About

移动端适配

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
Morty Proxy This is a proxified and sanitized view of the page, visit original site.