• HTML5 手机端动态适配


    • CSS控制

        em、rem布局

        这里给出一个自己常用的实例,CSS控制移动端不同机型的适配主要是利用媒体查询来根据屏幕宽度来决定html的基础字体的大小,在body内的块级元素的话就可以用rem或者em单位来对页面进行布局了。其中的不同是rem是基于body的font-size来确定的,而em则是根据其父元素的font-size来决定的,可以说各有利弊,如果是将设计稿转换为Html的话,使用媒体查询+rem比较方便计算出每个的数据,而em可能相对麻烦一下,但是在调节页面的时候,如果使用了em布局,如果只是想页面的某一块的大小进行调整,那么只需要更改其父元素的em大小即可,不用更改其每个子元素。因此使用rem和em都是根据个人的情况和实际项目来决定。

     1 @media screen and (min- 320px) {html{font-size:50px;}}
     2 @media screen and (min- 360px) {html{font-size:56.25px;}}
     3 @media screen and (min- 375px) {html{font-size:58.59375px;}}
     4 @media screen and (min- 400px) {html{font-size:62.5px;}}
     5 @media screen and (min- 414px) {html{font-size:64.6875px;}}
     6 @media screen and (min- 440px) {html{font-size:68.75px;}}
     7 @media screen and (min- 480px) {html{font-size:75px;}}
     8 @media screen and (min- 520px) {html{font-size:81.25px;}}
     9 @media screen and (min- 560px) {html{font-size:87.5px;}}
    10 @media screen and (min- 600px) {html{font-size:93.75px;}}
    11 @media screen and (min- 640px) {html{font-size:100px;}}
    12 @media screen and (min- 680px) {html{font-size:106.25px;}}
    13 @media screen and (min- 720px) {html{font-size:112.5px;}}
    14 @media screen and (min- 760px) {html{font-size:118.75px;}}
    15 @media screen and (min- 800px) {html{font-size:125px;}}
    16 @media screen and (min- 960px) {html{font-size:150px;}}

        百分比布局

        对于不同的屏幕宽度,使用百分比布局也是一种动态适配的好方法,尤其是有事在需要让几个元素充满整行的情况,分别用百分比相对于使用rem或者em来设置其宽度更为方便,省去了计算的麻烦,因此在实际的操作中我常常使用rem和百分比相结合的布局方法。

    • Js控制

        js控制的原理是利用initial-scale属性对屏幕进行缩放,如下面的代码,在切图的过程中,所有的尺寸都是基于750px屏幕宽度下进行布局,所以只需要以实际尺寸与750px的比例来把页面缩放就可以达到动态适配的目的。这个方法虽然看起来很简单,但是因为用了js还需要考虑到浏览器的兼容性问题,可以去参考一下PPK关于viewport的几个看法。

    1 (function(){
    2         var rate=screen.width/750;
    3         console.log(rate);
    4         document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+rate+'">');
    5     })();
  • 相关阅读:
    图解C/C++多级指针与多维数组
    排序---选择排序
    排序---插入排序
    排序---希尔排序
    Merge Two Sorted Lists
    Remove Nth Node From End of List
    如何阅读Django文档?
    机器学习 第一章 绪论 笔记
    python工程实践·笔记
    Python后端开发面经
  • 原文地址:https://www.cnblogs.com/cheerup/p/6179496.html
Copyright © 2020-2023  润新知