好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

pageResponse

pageResponse 介绍

使用transform:scale缩放 页面 ,要求视觉稿高清, 页面 以px为单位即可让h5适配各种移动设备,适配原则根据视觉稿比例缩放 页面 。告别rem、媒体 查询 、百分比等相对复杂且定位不精准的布局。

兼容性良好, 支持 ios4+、android2.3+、winphone8+系统。

约1k,零依赖。

三种适配模式可选 auto || contain || cover。

contain模式(推荐)

保持 页面 的宽高比,调整 页面 的宽度或高度(较大者),使 页面 完全包含在浏览器窗口中

页面 水平垂直居中,左右或上下可能出现空白, 页面 背景使用纯色或可复制背景可 解决 此类问题

适合滑屏 页面 、单屏 页面

cover模式

保持 页面 的宽高比,调整 页面 的宽度或高度(较小者),使 页面 完全覆盖浏览器窗口

页面 水平垂直居中,超出浏览器窗口左右或上下的 内容 会被隐藏

适合滑屏 页面 、单屏 页面 ,且 页面 边缘无重要 内容

auto模式( 默 认模式)

保持 页面 的宽高比,调整 页面 的宽度,使 页面 宽度完全包含在浏览器窗口中

快速 上手

Meta 的viewport设置:

< Meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user- scalable =no" name="viewport">

启用 插件 代码 示例一:

<div>

<img src="img/demo1.jpg" alt="" width="320" height="504">

<h1>你一定也有过 一个 翱翔天际的梦1</h1>

<p>- 回家,或踏上旅途,飞机是自由的符号 -</p>

</div>

//如果视觉稿尺寸是640px*1008px, 页面 样式是以视觉稿尺寸除以2来计算,那么输入 页面 的宽度为320px和高度为504px

window.onresize = function(){

pageResponse({

selectors : '.page',//模块选择器,使用querySelectorAll的 方法

mode : 'contain',// auto || contain || cover

width : '320',//输入 页面 的宽度,只 支持 输入数值, 默 认宽度为320px

height : '504' //输入 页面 的高度,只 支持 输入数值, 默 认高度为504px

})

}

document.addEventListener("DOMContentLoaded",function() {

pageResponse({

selectors : '.page',//输入 页面 的宽度,只 支持 输入数值, 默 认宽度为320px

height : '504' //输入 页面 的高度,只 支持 输入数值, 默 认高度为504px

})

}

启用 插件 代码 示例二:

<!-- 2个模块(包含隐藏的)都包含class:page,pageResponse可对这2个模块起作用 -->

<div>

<img src="img/demo1.jpg" alt="" width="640" height="1008">

<h1>你一定也有过 一个 翱翔天际的梦1</h1>

<p>- 回家,或踏上旅途,飞机是自由的符号 -</p>

</div>

<div>

<p>是否还记得她</p>

<img src="img/ logo .jpg" alt="" width="40" height="40">

</div>

//如果视觉稿尺寸是640px*1008px, 页面 样式是以视觉稿原始尺寸来计算,那么输入 页面 的宽度为640px和高度为1008px

window.onresize = function(){

pageResponse({

selectors : '.page',// auto || contain || cover

width : '640',//输入 页面 的宽度,只 支持 输入数值, 默 认宽度为320px

height : '1008' //输入 页面 的高度,只 支持 输入数值, 默 认高度为504px

})

}

document.addEventListener("DOMContentLoaded",//输入 页面 的宽度,只 支持 输入数值, 默 认宽度为320px

height : '1008' //输入 页面 的高度,只 支持 输入数值, 默 认高度为504px

})

}

GitHub: https://github.com/peunzhang/pageResponse

网站描述: 移动端响应式 插件

pageResponse官方网站

官方网站:

如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。

查看更多关于pageResponse的详细内容...

  阅读:45次

上一篇

下一篇

第1节:ng-alain    第2节:sing-app    第3节:Adminify    第4节:ant-design-pro    第5节:evergreen    第6节:rsuite    第7节:UIkit    第8节:CoreUI    第9节:RageFrame    第10节:BlurAdmin    第11节:Ace Admin    第12节:SUI    第13节:vue ui    第14节:Laravel-admin    第15节:luda    第16节:gentelella    第17节:storybook    第18节:Grommet    第19节:iView ui    第20节:react-kawaii    第21节:Semantic-UI    第22节:Swagger UI    第23节:Office UI Fabric    第24节:react-native-web    第25节:拼图.pintuer    第26节:antd-admin    第27节:Skeleton    第28节:edex-ui    第29节:vue-beauty    第30节:Cf-ui    第31节:react-tv    第32节:material-dashboard    第33节:charisma    第34节:quickui    第35节:vue-blu    第36节:lulu ui    第37节:Gestalt    第38节:React95    第39节:ZUI    第40节:vuestic-admin    第41节:html5-boilerplate    第42节:Materialize    第43节:React Suite    第44节:AdminLTE    第45节:Rebass    第46节:material-ui    第47节:Element UI    第48节:vue-multiselect    第49节:iView Admin    第50节:Flat UI    第51节:Rubik UI    第52节:best-resume-ever    第53节:sb-admin    第54节:ng2-admin    第55节:Jquery EasyUI    第56节:react-desktop    第57节:at-ui    第58节:rdash-angular    第59节:wxa-plugin-canvas    第60节:xy-ui    第61节:vue-strap    第62节:vuetify    第63节:buefy    第64节:bootswatch    第65节:H+    第66节:mdui    第67节:AlloyUI    第68节:Bootflat    第69节:TileBoard    第70节:primeng    第71节:Structor    第72节:mp_canvas_drawer    第73节:ng-zorro-antd    第74节:UXCore    第75节:Vali    第76节:Muse-UI    第77节:virtual-scroller    第78节:DXY-UI    第79节:zhengAdmin    第80节:avue    第81节:vue-element-admin    第82节:Vue-Access-Control    第83节:Dcat Admin    第84节:awesome-react-components    第85节:Vuesax    第86节:vue-design-system    第87节:tabler    第88节:jquery-ui    第89节:vue-framework-wz    第90节:bideo.js    第91节:Auto-Layout    第92节:pageResponse    第93节:ice 飞冰    第94节:Elemental UI    第95节:ok-admin    第96节:form-generator    第97节:layui    第98节:Muuri    第99节:ngx-admin    第100节:ant-design-pro-vue    第101节:Kendo UI    第102节:Nebular    第103节:pearProject    第104节:BUI    第105节:marko    第106节:Magic-Grid    第107节:Atui    第108节:react-toolbox    第109节:vali-admin    第110节:d2-admin    第111节:DevUI Design