PC端、移动端页面适配方案

【PC端、移动端页面适配方案】的更多相关文章

PC端、移动端页面适配方案

前言页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面本文记录在java后端进行PC端.移动端页面适配的方案工程结构想要实现后端统一适配,首先要规范好工程结构后端代码,跟之前差不多,响应的viewName路径,直接从业务模块开始,适配工作交给aop:两套页面,对应的业务模块,分别放在两个目录下面 aop适配器统一的适配工作交由aop环绕切面进…

「移动端」Web页面适配

一.什么是移动端适配移动端 Web 页面,就是常说的手机 h5页面.webview页面.公众号开发的网页等. 由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各种尺寸设备的兼容问题,我们要做的 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放. 二.移动适配方案常见的移动适配方案有以下几种: viewport 盒模型 flex rem 2.1.viewport - 可视区最初手机端需要照顾 PC 端,如果不设置 viewpo…

最佳移动端h5自适应rem适配方案

一.利用lib-flexible.postcss-plugin-px2rem插件进行移动端rem适配. 1.第一引入lib-flexible . 安装lib-flexible: npm i lib-flexible --save-dev 在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible', 在index.html中是否去掉meta name="viewport" 标签要看框架具体情况,具体请看第四条, 2.第二使用p…

移动端Web页面适配方案

概念理解 viewport视口 visual viewport 可见视口,设备屏幕的宽度 windw.innerWidth/Height layout viewport 布局视口,DOM宽度 document.documentElement.cliendWidth/Heig ideal viewport 理想视口:目标是让把默认的layout viewport宽度设置为移动设备的屏幕宽度 visual viewport = layout viewport * scale <meta name=…

pc端的弹性布局适配方案

方案及原理:使用rem单位,通过window.onresize来监听浏览器窗口,获取窗口宽度,并改变跟字体大小来达到弹性适配效果. function adaptor(){ //为了便于计算,这里以1920px为基准 let width = document.body.clientWidth let fontSize = document.getElementsByTagName('html')[0].style.fontSize = width / 19.2 + "px"; } ada…

移动端移动web屏幕适配方案随不同宽度的屏幕而改变

链接地址1:http://www.cnblogs.com/zjzhome/p/4802157.html 链接地址2:http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041 链接地址3:http://isux.tencent.com/web-app-rem.html common.js参考淘宝m.taobao.com var dpr, rem…