js或css控制网页手机横屏时显示设定规格

以下代码是横竖屏时width都为100%怎么控制横屏时为50%或300pxvaro=document.createElement("div");vararand=Math... 以下代码是横竖屏时width都为100% 怎么控制横屏时为50%或300px

var o = document.createElement("div");
var arand = Math.floor(Math.random() * 100000);
var ext = ads[0].imageurl.substr(ads[0].imageurl.lastIndexOf(".")).toLowerCase();

if (ext == '.html') {
var i = '<div style="position:absolute;z-index:10000;background-color:#fff;opacity:0.01;filter:alpha(opacity:1);"><a href="' + ads[0].url + '" target="_blank" style="display:block;width:100%;height:auto;"></a></div><iframe src="' + ads[0].imageurl + '" width="100%" height="auto" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" id="img_' + arand + '"></iframe>';

}else {
var i = '<a id="__a_z_'+arand+'" href="' + ads[0].url + '" target="_blank" class="av_' + arand + '" style="margin: 0;padding: 0;border: 0;display: block;width: 100%;float: left;text-align: center;background-size: 100% auto !important;position: relative;background:url(' + ads[0].imageurl + ') rgba(0,0,0,0) no-repeat center;"><img src="' + ads[0].imageurl + '" style="width:100%" id="img_' + arand + '"></a>';
}
o.id = arand;
o.style.cssText = "position: fixed;z-index: 2147483647;left:0px;width:100%;text-align:center;";
if (zone.htmlcontrol) {
if (zone.htmlcontrol.position == 'top') {
o.style.top = "0px";
}
if (zone.htmlcontrol.position == 'bottom') {
o.style.bottom = "-5px";
}
}
o.innerHTML = "<div style='display:inline-block;vertical-align:middle;width:100%;'><img src='" + domain.imgurl + "/images/close.png' style='position:absolute;top:0px;right:0px;cursor:pointer;width;20px;height:20px;z-index:2147483647'id='c" + arand + "'>" + i + " </div>";

document.body.appendChild(o);
document.getElementById("img_" + arand).onload = function() {
var advh = document.getElementById(o.id).offsetHeight;
if (zone.htmlcontrol.position == 'top') {
document.body.style.paddingTop = advh + "px";
}
if (zone.htmlcontrol.position == 'bottom') {
document.body.style.paddingBottom = advh + "px";
}
};

function close() {
if (o) o.style.display = 'none';
}
__A(__G('c' + arand), "click", close);

function __C2(i){
var C_2=new Image();
C_2.src=ads[0].c2_url;

}
if (zone.plantype=='cpv') {
__A(__G('__a_z_'+arand), "click", __C2);
}

pvid.aid.push(ads[0].adsid);
pvid.pid.push(ads[0].planid);
pvstas(pvid);

我的百度大人不要屏蔽
o.style.cssText = 主要就是判断这里的100% 展开

 我来答

1个回答

#热议# 不吃早饭真的会得胆结石吗？

百度网友2a546d3
2017-05-10 · TA获得超过157个赞

知道小有建树答主

回答量：115

采纳率：78%

帮助的人：76.7万

我也去答题访问个人页

关注

展开全部

你可以参考下css的Media Query这个是做响应式的时候用的技术方案

更多追问追答

追问

本人菜鸟  懂的直接贴代码 谢谢

追答

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--viewport显示默认的像素大小，不缩放，这个属性很重要-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*大于500px的时候*/
        @media screen and (min-width: 501px){
            div{
                color: black;
            }
        }
        /*分辨率在500px与400px之间的时候*/
        @media screen and (max-width: 500px) and (min-width: 400px){
            div{
                color: red;
            }
        }
        /*小于400像素的时候*/
        @media screen and (max-width: 399px){
            div{
                color: green;
            }
        }
    </style>
</head>
<body>
<div>
    在不同的分辨率下边有不同的效果
</div>
</body>
</html>

竖屏状态

横屏状态

需要注意的就是必须设置meta标签的viewport的属性





本回答被提问者采纳

已赞过 已踩过<

评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js或css控制网页手机横屏时 显示设定规格

其他类似问题

为你推荐：

js或css控制网页手机横屏时显示设定规格