如何为移动/桌面视图中的内容设置不同的设置？

我已在我的网站上使用叠加层布局安装了自定义搜索引擎。事情是它在桌面视图中显示全宽，所以我把脚本放在<div class="reduce">...</div>之间，并添加了一个自定义CSS文件来减少条的宽度。在CSS代码如下：如何为移动/桌面视图中的内容设置不同的设置？

.reduce 
{ 
width:35%; 
margin-left:auto; 
margin-right:auto; 
}

谷歌自定义搜索引擎代码：

<div class="reduce"> 
<script> 
    (function() { 
    var cx = '012035866174049355570:ld4iogvd2ok'; 
    var gcse = document.createElement('script'); 
    gcse.type = 'text/javascript'; 
    gcse.async = true; 
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 
     '//www.google.com/cse/cse.js?cx=' + cx; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(gcse, s); 
    })(); 
</script> 
<gcse:search></gcse:search> 
</div>

它看起来桌面上的观点很好，但如果在移动浏览，搜索栏杂乱。那么有没有什么办法可以编码它，这样当网站在桌面上打开时，它会运行上面的CSS，当它检测到移动设备时，宽度变为100％？

这是网站LINK的。

来源

2014-10-29 Siddharth Thevaril

您是如何安装自定义搜索引擎???在小提琴或类似的例子中显示一个例子： – 2014-10-29 20:20:44

我的意思是谷歌自定义搜索引擎 – 2014-10-29 20:21:50

您可以使用媒体查询或简单地增加一个固定的最大宽度和宽度100％

.reduce { 
    width: 100%; 
    max-width: 555px; 
    margin-left: auto; 
    margin-right: auto; 
}

对于媒体查询，您将拥有它。首先是.reduce的常规风格，然后是媒体查询，您将定位768px或更少（平板电脑和移动设备）的所有设备。

.reduce { 
    width: 100%; 
    max-width: 35%; 
    margin-left: auto; 
    margin-right: auto; 
} 

@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px){ 
    .reduce {    
     max-width: 100%;    
    } 
}

来源

2014-10-29 20:25:36

这就是它！作品！我完全忘记了最大宽度的属性！ – 2014-10-29 20:28:12

虽然有一个问题，您是如何翻译35％到555px的？在非常高分辨率的屏幕上，搜索栏会不会很小？ – 2014-10-29 20:28:54

在我的浏览器中35％是555px :)但是你可以添加多少你想要的。虽然如果您担心搜索栏在高分辨率下的显示效果，那么您可以使用媒体查询:)或者您可以将其设置为与页面内容div一样宽，以便它们更加紧凑:) – 2014-10-29 20:35:35

使用媒体查询：

@media screen and (max-device-width: 700px) { 
 
    .reduce { 
 
    width: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
@media screen and (min-device-width: 701px) { 
 
    .reduce { 
 
    width: 35%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div class="reduce" style="background:red; height:50px;"></div>

变化min-device-width和max-device-width到任何宽度你认为你的网站看起来局促在

来源

2014-10-29 20:23:05 DividedByZero

如何为移动/桌面视图中的内容设置不同的设置？

回答

相关问题