首页/html5前端开发/html5自适应代码| html5 手机自适应代码

html5自适应代码| html5 手机自适应代码

发布-网页培训班 | 浏览量-

 方案一:元素的宽高用rem来定义

 
(function () {
    document.addEventListener('DOMContentLoaded', function () {
        var html = document.documentElement;
        var windowWidth = html.clientWidth;
        html.style.fontSize = windowWidth / 6.4 + 'px';
        // 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
    }, false);
})();
 
// 这个6.4就是根据设计稿的横向宽度来确定的,假如你的设计稿是750
// 那么 html.style.fontSize = windowWidth / 7.5 + 'px';
举例:
 
.icon {
    width: 1.4rem; 
    height: 1.4rem;
    margin: 0 0 0 .5rem;
}
 
方案二:元素的字体大小用em和媒体查询结合使用:
1:备注,这样的话字体的设置与元素的宽高设置分开
 
@media screen and ( max-width : 320 px ) {
                      body {
                            font-size : 14 px ;
                      }
                 }
 
                 @media screen and ( min-width : 321 px ) and ( max-width: 413 px) {
                      body {
                            font-size : 16 px ;
                      }
                 }
 
                 @media screen and ( min-width : 414 px ) and ( max-width: 639 px) {
                      body {
                            font-size : 17 px ;
                      }
                 }
 
                 @media screen and ( min-width : 640 px ) {
                      body {
                            font-size : 18 px ;
                      }
                 }
举例:
 
.icon {
    width: 1.4rem; 
    height: 1.4rem;
    margin: 0 0 0 .5rem;
}
附加移动最小字体测试:挺好用的:http://www.cnblogs.com/he-lian/p/4512276.html
总结:结论:移动端最小字体为12px(仅chrome有此限制),建议最小使用12px;
               如果设计稿中有小于12px的字体,按实际字号写css样式;
 
     结论2:   iphone类移动设备不受最小字号限制;
                    其它设备可能会受8px限制;
                    chrome中限制最小12px。

原文地址:http://www.35ui.cn/post/20160822749.html

标签HTML5自适应代码

上一条: cookie总结以及html5中的session比较
下一条: html5手机移动端WEB资源整合 移动前端头部标签(HTML5 head meta)

或许你还对下面的文章感兴趣