WEB端、WebApp、LED大屏等 H5页面基于缩放实现页面自适应

1、CSS3 transform 属性(http://www.w3school.com.cn/cssref/pr_transform.asp)

 

  • transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

    我们实现大屏自适应使用了transform的缩放功能

     

  •    transform相关语法

    transform: none|transform-functions;

    描述

    测试

    none

    定义不进行转换。

    测试

    matrix(n,n,n,n,n,n)

    定义 2D 转换,使用六个值的矩阵。

    测试

    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

    定义 3D 转换,使用 16 个值的 4x4 矩阵。

     

    translate(x,y)

    定义 2D 转换。

    测试

    translate3d(x,y,z)

    定义 3D 转换。

     

    translateX(x)

    定义转换,只是用 X 轴的值。

    测试

    translateY(y)

    定义转换,只是用 Y 轴的值。

    测试

    translateZ(z)

    定义 3D 转换,只是用 Z 轴的值。

     

    scale(x,y)

    定义 2D 缩放转换。

    测试

    scale3d(x,y,z)

    定义 3D 缩放转换。

     

    scaleX(x)

    通过设置 X 轴的值来定义缩放转换。

    测试

    scaleY(y)

    通过设置 Y 轴的值来定义缩放转换。

    测试

    scaleZ(z)

    通过设置 Z 轴的值来定义 3D 缩放转换。

     

    rotate(angle)

    定义 2D 旋转,在参数中规定角度。

    测试

    rotate3d(x,y,z,angle)

    定义 3D 旋转。

     

    rotateX(angle)

    定义沿着 X 轴的 3D 旋转。

    测试

    rotateY(angle)

    定义沿着 Y 轴的 3D 旋转。

    测试

    rotateZ(angle)

    定义沿着 Z 轴的 3D 旋转。

    测试

    skew(x-angle,y-angle)

    定义沿着 X 和 Y 轴的 2D 倾斜转换。

    测试

    skewX(angle)

    定义沿着 X 轴的 2D 倾斜转换。

    测试

    skewY(angle)

    定义沿着 Y 轴的 2D 倾斜转换。

    测试

    perspective(n)

    为 3D 转换元素定义透视视图。

    测试

  • 演示demo

    (1)为了更好地理解 transform 属性,请查看这个演示。

       (2)CSS3 教程:CSS3 2D 转换

       (3)CSS3 教程:CSS3 3D 转换

 

2、基于CSS3 transform 缩放 特性实现大屏自适应

 

  • 主意事项:

    (1)H5的特性,页面里最好声明H5规范 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    (2)手机端实现自适应也需要声明H5规范,这样获取屏幕可视宽、高更准确

  • 大屏自适应实现逻辑

    1)预设页面像素比例(宽:3840 ;高:2160 ),不同的大屏像素需重新预置该比例 ,可得出预设比例    var temp=3840/2160;

    2)获取当前屏幕可视区域的宽、高,  var wid = $(window).width();        var hei = $(window).height();

    3)判断当前屏幕宽、高比例  var c_temp = wid/hei;    

    4)若  temp <= c_temp    屏幕宽度大于等于高度,则按比例填满高度, 宽度按比例动态位移;  注意这里强调按比例,动态计算出要移位的像素大小后需再除以比例(详见实现代码

    5)若  temp > c_temp    屏幕宽度小于高度,则按比例填满宽度, 高度按比例动态位移; 

     

  • 代码实现

 

大屏页面自适应代码实现

 

 

H5大屏页面实现代码

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<meta charset="utf-8" />

<title>测试页面title>

<style type="text/css">

 

     

 

    html{

      

          

        transform: scale(1) translate(0px, 0px);

        transform-origin: 0px 0px;

    }

 

    body{

        overflow: hidden;

        margin:0px;

        border:0px;

      

    }

 

.App {

              

            width: 3840px;

            height: 2160px;

              

            /*background: url(background.jpg) no-repeat;

            background-size: 100% 100%;*/

        }

         

  

     

 

    /*.iframe{

        width: 1080px;

        height: 1050px;

    }*/

style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js">script>

<script type="text/javascript">

     

   //此处引入上面的js代码实现

 

script>

head>

<body>

    <div class="App" >

        

        <iframe src="http://192.168.0.6:8008/FJ-LargeScreen-2k-svn/" frameborder="0" width="100%" height="100%">iframe>

    div>

  

body>

html>

 

你可能感兴趣的:(前端)