HTML5 移动端自适应布局


本文摘自PHP中文网,作者Guanhui,侵删。

场景:为适应各种大小的屏幕

自适应布局我知道的两种方式

1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<style>

   @media only screen and (max-width: 360px) and (min-width: 320px){

    html{

     font-size:13.65px;

    }

   }

   @media only screen and (max-width: 375px) and (min-width: 360px){

    html{

     font-size:23.4375px;

    }

   }

   @media only screen and (max-width: 390px) and (min-width: 375px){

    html{

     font-size:23.4375px;

    }

   }

   @media only screen and (max-width: 414px) and (min-width: 390px){

    html{

     font-size:17.64px;

    }

   }

   @media only screen and (max-width: 640px) and (min-width: 414px){

    html{

     font-size:17.664px;

    }

   }

   @media screen and (min-width: 640px){

    html{

     font-size:27.31px;

    }

   }

  </style>

2.响应式,获取到屏幕的宽度,计算出一定的比例大小,使用rem代替px,在使用的时候如 font-size:1rem,在不同屏幕大小的手机上展示的大小效果是不一样的,和手机屏幕的大小比例自适应

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<script>

   (function(doc, win) {

    var docEl = doc.documentElement, //根元素html

     //判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。

     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

     recalc = function() {

      var clientWidth = docEl.clientWidth;

      if(!clientWidth) return;

      //把document的fontSize大小设置成跟窗口成一定比例的大小,从而实现响应式效果。

      if(clientWidth >= 640) {

       clientWidth = 640;

      }

      docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

      console.log(clientWidth);

      console.log(docEl.style.fontSize);

     };

     recalc();

    if(!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false); //addEventListener事件方法接受三个参数:第一个是事件名称比如点击事件onclick,第二个是要执行的函数,第三个是布尔值

    doc.addEventListener('DOMContentLoaded', recalc, false) //绑定浏览器缩放与加载时间

   })(document, window);

  </script>

1

2

<p id="p2" class="text" style="border: 0.04rem solid #ccc;

            height: 14rem;font-size: 0.5rem;">

推荐教程 :《HTML》

阅读剩余部分

相关阅读 >>

h5的标题书写问题

HTML5web本地存储实例详细说明

HTML5的音频和视频监听器的应用代码详解

讲讲HTML5中被废弃的标签

HTML5实现调用摄像头并拍照功能

h5实现qq聊天气泡的实例介绍

HTML5实践-css3 media queries详情介绍

值得一个的5个强大的HTML5api 函数

HTML5 canvas来绘制三角形和矩形等多边形的方法

HTML5中转义实体字符,元数据, 跳转以及全局属性的图文详解

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...