普通的html如何写自适应

首先，引入flexible.js

//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {var doc = document,win = window,docEl = doc.documentElement,remStyle = document.createElement("style"),tid;//浏览器竖屏与横屏转换的BUG。function refreshRem() {var width = docEl.getBoundingClientRect().width;maxWidth = maxWidth || 540;width>maxWidth && (width=maxWidth);var rem = width * 100 / designWidth;remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';}if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(remStyle);} else {var wrap = doc.createElement("div");wrap.appendChild(remStyle);doc.write(wrap.innerHTML);wrap = null;}//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；refreshRem();win.addEventListener("resize", function() {clearTimeout(tid); //防止执行两次tid = setTimeout(refreshRem, 300);}, false);win.addEventListener("pageshow", function(e) {if (e.persisted) { // 浏览器后退的时候重新计算clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === "complete") {doc.body.style.fontSize = "16px";} else {doc.addEventListener("DOMContentLoaded", function(e) {doc.body.style.fontSize = "16px";}, false);}
})(640, 640);

1.复制上面这段代码到你的页面的头部的script标签的最前面。

2.根据设计稿大小，调整里面的最后两个参数值。(感谢这位大佬https://blog.csdn.net/alleged/article/details/79031857)

然后将设计稿传到蓝湖啦~~~
再设置下

然后就可以直接写啦，比如设计稿是300px;我们就直接可以写3rem啦，记得除以100哦~~

普通的html如何写自适应相关推荐

html手机端自适应头部,html5写自适应头部
仿写的一个聚划算的例子 *{ margin: 0; padding: 0; } header{ width: 100%; height: 45px; background-color: rgba(24 ...
系统调用回答为什么要用buffer写
为什么系统调用会慢? 程序的读写是要调用内核的方法去写,产生系统调用,就必须频繁的切换用户态和内核态,切换的过程需要保存现场,清理寄存器,回复现场等,消耗cpu时间,所以慢,好的程序应该是尽量减少这种 ...
Java 写时拷贝容器CopyOnWriteArrayList的测试
测试代码: package copyOnWriteArrayListTest;import java.util.ArrayList; import java.util.List; import jav ...
自适应辛普森（算法简要 + 模板）
简述: 对于普通的二次函数有f(x)=ax2+bx+cf(x) = ax ^ 2 + bx + cf(x)=ax2+bx+c,原函数F(x)=ax33+bx22+cxF(x) = \frac{a x^ ...
Unity UGUI屏幕自适应
转载http://blog.csdn.net/lyh916/article/details/50865541 参考链接: http://www.jianshu.com/p/96fd1fbe8409 h ...
AVL树的理解及自写AVL树
AVL树是最先发明的自平衡二叉查找树.在AVL树中任何节点的两个子树的高度最大差别为一,所以它也被称为高度平衡树.查找.插入和删除在平均和最坏情况下都是O(log n).增加和删除可能需要通过一次或多 ...
css 真正意义上达到height:100%，自适应屏幕高度
最近发现了个用绝对布局写自适应屏幕的写法,让我觉得,之前小程序傻傻读屏幕高再给背景view赋值min-height的写法简直太傻了毕竟能用css解决的问题最好就不要js .shi{position: ...
python写前端代码_python前端学习之移动端和bootstrap
我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢 ...
带你一步步从PC（电脑）网页自适应到手机端网页（小白入门必看）
最近帮老师改个网站,将PC端网页改为手机端网页,虽然对于有一定开发经验的前端开发者是很easy的事情,但是呢,对于小白来说,还是很一头雾水的.下面咱们就从头来进行实战,看看自适应到手机端到底是怎么回事 ...

普通的html如何写自适应

普通的html如何写自适应相关推荐

最新文章

热门文章