2016.06.20-21 html5学习(自适应)

Posted 唯一的liaoliao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2016.06.20-21 html5学习(自适应)相关的知识,希望对你有一定的参考价值。

  这两天学的是自适应,代码有点乱。而且这几天忙着写实习报告,也没有时间去整理。

  但是,这下面代码吧,是可以获取html的font-size值的,然后用来设置相对单位rem的从而达到自适应效果的;看到红色的width了吧,把它改成你屏幕宽度就好,比如我的是1920px;那么这样算出来html{font-size:600px}; 这样的话你要设置其他元素的rem,比如span{font-size:12px;},要自适应就用12/600,就是0.02rem,span{font-size:0.02rem;}这样你的span字体就随屏幕大小也变了,或者你要设置图片啊傻的,也是用它的宽或者高除于600。

  至于你要pc端和手机端分开效果什么的,用@media分别写CSS样式就哦了。

 <script>
        !(function(doc, win) {
            var docEle = doc.documentElement,//获取html元素
                event = "onorientationchange" in window ? "orientationchange" : "resize",//判断是屏幕旋转还是resize;
                fn = function() {
                    var width = docEle.clientWidth;
                    width && (docEle.style.fontSize = 100  * (width / 320) + "px");//设置html的fontSize,随着event的改变而改变。
                };
            
            win.addEventListener(event, fn, false);
            doc.addEventListener("DOMContentLoaded", fn, false);
        
        }(document, window));
    </script>

以上是关于2016.06.20-21 html5学习(自适应)的主要内容,如果未能解决你的问题,请参考以下文章

html5手机页面背景图片自适应大小问题

简单实用响应式个人博客HTML5网站模板

前端学习之路之自适应设计(sass语法)

前端学习之路之自适应设计(sass语法)

Android项目实战:TextView自适应大小

HTML5自适应通用型多功能后台管理系统