zoukankan      html  css  js  c++  java
  • 页面元素自适应

    在html5下使得页面自适应,以满足不同浏览器下的大小适应的问题。

    1、对文本的处理增加的内容

    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
    <meta http-equiv='pragma' content='no-cache' />
    <meta http-equiv='cache-control' content='no-cache' />
    <meta http-equiv='expires' content='0' />

     主要部分已使用红色标注

    2、对图片的处理

    在页面中增加样式控制

    <style type='text/css'>
         img {  100%; }
    </style>

     3、不使用绝对宽度

    由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

    具体说,CSS代码不能指定像素宽度:

    xxx px;

    只能指定百分比宽度:

    xx%;

    或者

    auto;

    我所使用的将页面所有图片自适应的方法。要求:小于屏幕宽度的图片正常大小,大于屏幕宽度的图片按照屏幕宽度展示。目前已测试过ie9,chrom,android浏览器和ipad浏览器。

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    	function initPage(){
    		 var objs = document.getElementsByTagName('img');
    		 var clientWid = document.documentElement.clientWidth;
                for(var i=0;i<objs.length;i++)  
                {  
    			   if(objs[i].width > clientWid){
    				 objs[i].style.width = '100%';
    			   }
                } 
    	}
    //-->
    </SCRIPT>

     使用该方法的弊端,需要图片都加载完之后,才能处理。当页面比较大时,速度会比较慢。

    人生苦短,我用python
  • 相关阅读:
    POJ 2240 Arbitrage spfa 判正环
    POJ 3259 Wormholes spfa 判负环
    POJ1680 Currency Exchange SPFA判正环
    HDU5649 DZY Loves Sorting 线段树
    HDU 5648 DZY Loves Math 暴力打表
    HDU5647 DZY Loves Connecting 树形DP
    CDOJ 1071 秋实大哥下棋 线段树
    HDU5046 Airport dancing links 重复覆盖+二分
    HDU 3335 Divisibility dancing links 重复覆盖
    FZU1686 神龙的难题 dancing links 重复覆盖
  • 原文地址:https://www.cnblogs.com/pigga/p/10098314.html
Copyright © 2011-2022 走看看