移动端web自适应适配布局解决方案
100%还原设计图,要注意:
看布局,分析结构。
前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现:
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
function resize() {
let width = window.screen.width;
const basicvalue = 1024; //设计稿上的分辨率大小 //放大100倍,为了方便计算rem大小
document.documentElement.style.fontSize = (width / basicvalue) * 100 + 'px';
} //加上以下代码是为了切换设备时能时刻刷新动态fontSize,从而得到正确的布局
window.addEventListener('resize', function () {
resize();
});
window.addEventListener('DOMContentLoaded', function () {
resize();
});
html{
font-size: 100px;
} @media only screen and (min-device-width:320px) and (max-device-height:568px){
html{
font-size: 42.6667px;
}
}
@media only screen and (min-device-width:375px) and (-webkit-min-device-pixel-ratio:2){
html{
font-size: 50px;
}
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio:3){
html{
font-size: 55.2px;
}
}
移动端web自适应适配布局解决方案的更多相关文章
- rem - 移动前端自适应适配布局解决方案和比较(转载)
原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...
- 再谈移动端Web屏幕适配
一个多月前水了一篇移动web屏幕适配方案,当时噼里啪啦的写了一通,自我感觉甚是良好.不过最近又有一些新的想法,和之前的有一些不同. 先说一下淘宝的方案,感觉现在好多的适配方案都是受了它的影响,上周六看 ...
- 简单而兼容性好的Web自适应高度布局,纯CSS
纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...
- 移动端web自适应解决方案: adaptive.js
代码有更新,最好直接查看github github:https://github.com/finance-sh/adaptive adaptivejs利用rem解决移动端页面开发的自适应问题 页面模板 ...
- 常见的H5移动端Web页面Bug问题解决方案总汇
解决jquery ajax调用远程接口的跨域问题 首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. $.ajax({ type:'get ...
- 移动端Web页面适配方案
概念理解 viewport视口 visual viewport 可见视口,设备屏幕的宽度 windw.innerWidth/Height layout viewport 布局视口,DOM宽度 doc ...
- Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 移动端Web App自适应布局探索
1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...
- web app 自适应 弹性布局之rem
关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...
随机推荐
- 不高兴的o( ̄ヘ ̄o#)JJ
题目描述 津津上初中了.妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参加妈妈为她报名的各科复习班.另外每周妈妈还会送她去学习朗诵.舞蹈和钢琴.但是津津如果一天上课超过八个小时就会不高兴,而 ...
- muse-ui底部导航自定义图标和字体颜色
最近在鼓捣用vue.js进行混合APP开发,遍寻许久终于找到muse-ui这款支持vue的轻量级UI框架,竟还支持按需引入,甚合萝卜意! 底部导航的点击波纹特效也是让我无比惊喜,然而自定义图标和字体颜 ...
- 深入解析ConcurrentHashMap类
以前写过介绍HashMap的文章,文中提到过HashMap在put的时候,插入的元素超过了容量(由负载因子决定)的范围就会触发扩容操作,就是rehash,这个会重新将原数组的内容重新hash到新的扩容 ...
- [.net 面向对象程序设计深入](18)实战设计模式——设计模式使用场景及原则
[.net 面向对象程序设计深入](18)实战设计模式——设计模式使用场景及原则 1,什么是设计模式? 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计 ...
- 简述一下MVC和MVVM
一. MVC 我们先来了解一下什么是MVC. MVC:分别所指Model.View.Controller. MVC为标准的设计模式,是官方推荐的权威的规范模式. 视图(View):用户交互界面. 控制 ...
- 微信小程序 + mock.js 实现后台模拟及调试
一.创建小程序项目 mock.js 从 https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js 下载 api.js:配置模拟数据和后 ...
- [Swift]LeetCode833. 字符串中的查找与替换 | Find And Replace in String
To some string S, we will perform some replacement operations that replace groups of letters with ne ...
- [Swift]LeetCode946. 验证栈序列 | Validate Stack Sequences
Given two sequences pushed and popped with distinct values, return true if and only if this could ha ...
- Firefox 多行标签的解决方案分享
更新了 Quantum 以后 TabMixPlus 就不能用了,我最中意的多行标签也没了,捣鼓了一下终于重新回来了. 指南: https://discourse.mozilla.org/t/tabs- ...
- RabbitMQ面试题
1.为什么要引入MQ系统,直接读写数据库不行吗?其实就是问问你消息队列都有哪些使用场景,然后你项目里具体是什么场景,说说你在这个场景里用消息队列是什么? 面试官问你这个问题,期望的一个回答是说,你们公 ...