个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试将响应式 CSS 用于媒体查询的某些结果。问题是移动屏幕不会在下面的 320x480 分辨率下向下滚动。知道为什么它不向下滚动吗？
最好的问候。
/*======================== RESPONSIVE ========================*/
@media only screen and (max-device-width: 320px) and (max-device-height:480px) and (orientation: portrait) {
body {
font-size: 14px;
border: 0 solid transparent;
}
h1, .intro h1 {
font-size: 32px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px;
}
.intro p {
font-size: 14px;
}
.intro p span {
width: 60px;
}
section h1 {
font-size: 2.5em;
margin-top: 0;
}
.logo {
text-align: center;
margin: 0 auto 40px auto;
font-family: ethnocentric, sans-serif;
font-size: 55px;
}
.pics {
padding-left: 0;
}
.col-md-3 {
padding-left: 0;
}
.partnerRow {
padding-left: 0;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
ul, ol {
padding: 0;
}
}
这是标记:
<!-- Overlay -->
<div id="firefly" class="bg-overlay">
<canvas id="star-canvas"></canvas>
</div>
<!-- End Overlay -->
<div class="lang">
<a href="#turkish" onclick="window.lang.change('tr'); return false;"><img src="images/turkey-icon.png" alt="Türkçe" id="tr"></a>
<a href="#english" onclick="window.lang.change('en'); return false;"><img src="images/uk-icon.png" alt="English" id="eng"></a>
</div>
<!-- Header -->
<header>
<div class="intro">
<!-- Site Logo -->
<div class="logo">IOTERM</div>
<!-- End Site Logo -->
<!-- Rotator Title -->
<div id="rotate">
<h1 class="rotate" lang="tr">
BİZ
<span lang="tr">NESNELERİN İNTERNETİ (IOT)</span>
<br>ÇÖZÜMLERİ
<br>ŞİRKETİYİZ,
<span lang="tr">BİZ IOTERM'ÜZ</span>
</h1>
<h1 class="rotate" lang="tr">
DAHA İYİ
<br>
<span lang="tr">BİR DÜNYA İÇİN</span>
<br lang="tr">BÜTÜNLEŞİK BİLGİ
<span lang="tr">SAĞLIYORUZ.</span>
</h1>
</div>
<!-- End Rotator Title -->
</div>
<!-- Nav -->
<nav>
<ul class="navigation">
<li class="link bottom move" id="iot_link">
<a href="#iot"><span lang="tr">IOT NEDİR</span></a>
</li>
<li class="link bottom move" id="about_link">
<a href="#about"><span lang="tr">HAKKIMIZDA</span></a>
</li>
<li class="link bottom move">
<a href="#contact"><span lang="tr">İLETİŞİM</span></a>
</li>
<li class="link bottom move" id="solutions_link">
<a href="#solutions"><span lang="tr">ÇÖZÜMLERİMİZ</span></a>
</li>
<li class="link bottom move" id="products_link">
<a href="#products"><span lang="tr">ÜRÜNLERİMİZ</span></a>
</li>
</ul>
</nav>
<!-- End Nav -->
</header>
<!-- End Header -->
<!-- About Section -->
<section id="about" data-direction="from-right">
<div class="content h4c">
<a href="#" class="close"></a>
<h1>
<span lang="tr">VİZYON ve AMAÇ</span>
</h1>
<div class="row text-center">
<div class="col-md-8 col-md-offset-2 h4c">
<h4 lang="tr">Vizyon</h4>
<p lang="tr">IoTerm olarak biz, müşterilerimizin ihtiyaçlarını belirleyerek, onlara en uygun, optimize edilmiş IoT ürünleriyle, hizmet ve çözüm sunarken müşterilerimizin işlerine değer katarak üstünlükleri için çaba sarf ederiz.</p>
<h4 lang="tr">Amaç</h4>
<ul style="list-style-type: none;">
<li lang="tr">Organizasyonlara çözüm ortağı gibi hizmet vererek araştırma, geliştirme ve operasyonel çözüm ihtiyaçlarını belirlemelerinde yardımcı olmak.</li>
<li lang="tr">Teknolojik gelişmeleri yakından takip ederek şirketlere, işletmelere danışmanlık sağlayarak değer katmak.</li>
<li lang="tr">Şirketlerin, organizasyonların kendi çözüm ve ürünleri için doğru yöntemi belirlemelerinde yardımcı olmak ve bu süreçte etkin rol üstlenmek.</li>
</ul>
</div>
</div>
<h4 lang="tr">Çözüm Ortaklarımız</h4>
<div class="row partnerRow">
<div class="col-md-2 thumbnailImage">
<a href="http://www.bulutistan.com" target="_blank">
<img src="images/bulutistan.png" class="bulutistanImg" alt="Bulutistan">
</a>
</div>
<div class="col-md-2 thumbnailImage">
<a href="http://www.datamarket.com.tr" target="_blank">
<img src="images/datamarket.png" class="datamarketImg" alt="DataMarket">
</a>
</div>
<div class="col-md-2 thumbnailImage">
<a href="http://www.esq.com" target="_blank">
<img src="images/esq.png" class="esqImg" alt="ESQ">
</a>
</div>
<div class="col-md-2 thumbnailImage">
<a href="http://www.libelium.com" target="_blank">
<img src="images/libelium.png" class="libeliumImg" alt="Libelium">
</a>
</div>
<div class="col-md-2 thumbnailImage">
<a href="http://www.microsoft.com" target="_blank">
<img src="images/microsoft.png" class="microsoftImg" alt="Microsoft">
</a>
</div>
<div class="col-md-2 thumbnailImage">
<a href="http://www.turkcell.com.tr" target="_blank">
<img src="images/turkcell.png" class="turkcellImg" alt="Turkcell">
</a>
</div>
</div>
</div>
</section>
<!-- End About Section -->
<!-- Solutions Section -->
<section id="solutions" data-direction="from-left">
<div class="container">
<a href="#" class="close"></a>
<h1>
<span lang="tr">ÇÖZÜMLERİMİZ</span>
</h1>
<div class="row solutionsRow">
<div class="col-md-3 no-pad">
<h2 lang="tr" class="solutions">Akıllı Şehirler</h2>
<div id="right" class="pics">
<img class="img-center" src="images/smart-cities1.png" width="168" height="168" alt="Akıllı Şehir"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Akıllı Otopark
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Akıllı Aydınlatma
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Trafik Sıkışıklığı
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad1">
<h2 lang="tr" class="solutions">Akıllı Çevre</h2>
<div id="right1" class="pics">
<img class="img-center" src="images/smart-env.jpg" width="168" height="168" alt="Akıllı Çevre"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Hava Kirliliği
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Orman Yangın Algılama
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Deprem Erken Teşhis
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad">
<h2 lang="tr" class="solutions">Akıllı Su</h2>
<div id="right2" class="pics">
<img class="img-center" src="images/smart-water.jpg" width="168" height="168" alt="Akıllı Su"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Su Sızıntıları
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Nehir Taşkınları
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Deniz Kirlilik Düzeyleri
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad1">
<h2 lang="tr" class="solutions">Akıllı Ölçüm</h2>
<div id="right3" class="pics">
<img class="img-center" src="images/smart_meter.jpg" width="168" height="168" alt="Akılı Ölçüm"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Su Akışı
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Hazne Seviyesi
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Akıllı Izgara
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad">
<h2 lang="tr" class="solutions">Akıllı Tarım</h2>
<div id="right4" class="pics">
<img class="img-center" src="images/smart-agriculture1.png" width="168" height="168" alt="Akıllı Tarım"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Gübreleme
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Şarap Kalite Artırılması
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Meteoroloji İstasyonu Ağı
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad">
<h2 lang="tr" class="solutions">Endüstriyel Kontrol</h2>
<div id="right6" class="pics">
<img class="img-center" src="images/smart-industry.jpg" width="168" height="168" alt="Endüstriyel Kontrol"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> İç Hava Kalitesi
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Sıcaklık İzleme
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Ozon Varlığı
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad1">
<h2 lang="tr" class="solutions">Acil Durumlar</h2>
<div id="right7" class="pics">
<img class="img-center" src="images/smart-security.jpg" width="168" height="168" alt="Acil Durumlar"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Çevre Erişim Kontrolü
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Patlayıcı ve Tehlikeli Gazlar
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Radyasyon Seviyeleri
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- End Solutions Section -->
<!-- Products Section -->
<section id="products" data-direction="from-left">
<div class="container containerProducts">
<a href="#" class="close"></a>
<h1>
<span lang="tr">ÜRÜNLERİMİZ</span>
</h1>
<div class="container-fluid">
<div class="row ">
<div class="col-md-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="row item active">
<div>
<div class="row ">
<div class="col-md-4" id="img1">
<a href="#"><img class="img-center" src="images/waspmote_pro_t.png" alt="waspmote" ></a>
</div>
<div class="col-md-4" id="img2">
<a href="#"><img class="img-center" src="images/waspmote_exp_radio_board_2-375_t.png" alt="waspmote" ></a>
</div>
<div class="col-md-4" id="img3">
<a href="#"><img class="img-center" src="images/u13_gw_t.png" alt="waspmote" ></a>
</div>
</div>
</div>
<div class="caption row ">
<div class="col-md-12">
<h3 class="productHeight">Waspmote</h3>
</div>
<div class="row" id="desc">
<div class="col-md-4" id="exp1">
<ul style="list-style-type: none;" class="productSize">
<li lang="tr">
<i class="fa fa-share-alt"></i> Tüm sensörlere bağlanabilir
</li>
<li lang="tr">
<i class="fa fa-rss"></i> Tüm wi-fi teknolojilerini destekler
</li>
<li lang="tr">
<i class="fa fa-cloud"></i> Bulut teknolojilerine uyumlu
</li>
</ul>
</div>
<div class="col-md-4" id="exp2">
<ul style="list-style-type: none;" class="waspmote">
<li lang="tr">
<i class="fa fa-check-circle"></i> Ultra düşük güç (0.7uA)
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> 100+ Sensör uyumluluğu
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Kablosuz uzaktan programlama
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Şifreleme Kütüphaneleri (AES, RSA)
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Encapsulated line available
</li>
</ul>
</div>
<div class="col-md-4" id="exp3">
<ul style="list-style-type: none;" class="waspmote">
<li lang="tr">
<i class="fa fa-check-circle"></i> Desteklediği Protokoller: RS-232,RS-485,Modbus,CAN Bus, 4-20mA
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> 3G/GPRS/LoRaWAN/LoRa/Sigfox/868/900MHz,ZigBee/802.15.4/WiFi/RFID/ NFC/ Bluetooth 4.0
</li>
</ul>
</div>
</div>
</div>
</div><!-- /Slide1 -->
<div class="row item">
<div class="bannerImage">
<iframe width="450" height="282" class="embed-responsive-item" src="https://www.youtube.com/embed/GRMMS8nOdwc?rel=0&controls=0&showinfo=0"></iframe>
</div>
<div class="caption row" id="yTube1">
<div class="col-md-12">
<h3 lang="tr" class="productHeight" id="utube2">Waspmote Sensör Kartı</h3>
</div>
<div class="row">
<div class="col-md-12 waspmoteps1">
<p lang="tr">Waspmote kartı için 50'den fazla sensör mevcuttur. </p>
</div>
</div>
</div>
</div><!-- /Slide2 -->
<div class="row item">
<div class="bannerImage">
<iframe width="450" height="270" class="embed-responsive-item" src="https://www.youtube.com/embed/f1wXYGDvYAY?rel=0&controls=0&showinfo=0"></iframe>
</div>
<div class="caption row" id="yTube2">
<div class="col-md-12">
<h3 lang="tr" class="productHeight" id="utube1">Waspmote Tak ve Algıla</h3>
</div>
<div class="row">
<div class="col-md-12 waspmoteps" id="wspmote">
<p lang="tr">Yeni Waspmote Tak ve Algıla geliştiricilerin elektroniğin zorluklarından kurtarıp sevislere ve uygulamalara odaklanmasını sağlar.</p>
</div>
</div>
</div>
</div><!-- /Slide4 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.span12 -->
</div><!-- /.row -->
</div><!-- /.container -->
</div>
</section>
<!-- End Products Section -->
<!-- Contact Section -->
<section id="contact" data-direction="from-bottom">
<div class="container fill containerContacts">
<a href="#" class="close"></a>
<h1>
<span lang="tr">İLETİŞİM</span>
</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h4 lang="tr">BİZE E-POSTA GÖNDEREBİLİR VEYA AŞAĞIDAKİ FORMU DOLDURABİLSİNİZ. SİZE EN KISA SÜREDE GERİ DÖNÜŞ YAPACAĞIZ.</h4>
<!-- Begin Phone -->
<div class="newline col-sm-3 text-center">
<i class="fa fa-mobile fa-2x"></i>
<br>
+90 (530) 1407342
<br>
+90 (216) 6888616
</div>
<!-- End Phone -->
<!-- Begin Email -->
<div class="newline col-sm-3 text-center">
<i class="fa fa-envelope-o fa-2x"></i>
<br>
contact@ioterm.com
</div>
<!-- End Email -->
<!-- Begin Address -->
<div class="newline col-sm-3 text-center">
<i class="fa fa-home fa-2x"></i>
<br>
IOTERM
<br>
İstanbul,
<span lang="tr">Türkiye</span>.
</div>
<!-- End Address -->
<!-- Begin Address -->
<div class="newline col-sm-3 text-center">
<i class="fa fa-home fa-2x"></i>
<br>
IOTERM
<br>
Boston,
<span lang="tr">ABD</span>.
</div>
<!-- End Address -->
<div class="clearfix"></div>
<div class="contactForm">
<!-- Start Contact Form -->
<form id="contactForm" action="#" method="post" role="form">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<input id="formName" type="text" class="input required" name="name" placeholder="Adınız" lang="tr">
</div>
<div class="form-group">
<input id="formEmail" type="email" class="input required" name="email" placeholder="E-posta adresiniz" lang="tr">
</div>
<div class="form-group">
<input id="phone" type="text" placeholder="Telefon numaranız" value="" size="30" name="phone" lang="tr">
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<textarea id="message" class="textarea required" name="message" rows="3" cols="40" placeholder="Sorunuz" lang="tr"></textarea>
</div>
<button value="Submit" id="submit" class="btn btn-green-border btn-lg" type="submit" lang="tr">GÖNDER</button>
</div>
</form>
<div class="successMsg"></div>
<!-- End Contact Form -->
</div>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
<!-- IOT Section -->
<section id="iot" data-direction="from-right">
<div class="content containerIot">
<a href="#" class="close"></a>
<h1>
<span lang="tr">IOT NEDİR</span>
</h1>
<div class="row text-center">
<div class="col-md-8 col-md-offset-2">
<p class="iot-font" lang="tr">Nesnelerin İnterneti (Internet of Things, kısaca IoT), fiziksel nesnelerin birbirleriyle veya daha büyük sistemlerle bağlantılı olduğu iletişim ağıdır.</p>
<img id="zoom" src="images/sw.png" data-zoom-image="images/sw_.jpg" width="450" height="253" alt="iot"/>
</div>
</div>
</div>
</section>
<!-- End IOT Section -->
</body>
EditT 1:您可以在 www.ioterm.com 上检查没有预定义 320x480 分辨率的不同版本，@media only screen 和(最大宽度:767px)下有此代码
html，正文{如果我禁用它滚动不起作用。但是如果我将它添加到 320x480 媒体查询中，它仍然不起作用。
溢出-y:自动!重要；
最佳答案
添加此代码使其工作!
@media only screen and (max-width: 767px) {
html, body {
overflow-y: auto !important;
}
body {
height: auto !important;
}
header {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
min-height: 550px;
}
.intro h1 {
font-size: 40px;
}
.intro p {
font-size: 16px;
}
.intro p span {
width: 80px;
}
section {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: 2 !important;
opacity: 1 !important;
}
section .content, section .container {
opacity: 1 !important;
}
.navigation {
display: none;
}
section {
padding: 4em 0;
}
#solutions {
padding: 0;
}
#solutions h1 {
background: none !important;
height: auto;
padding: 0px !important;
}
.close {
display: none;
}
关于twitter-bootstrap - 移动设备的 Css 响应式设计不会向下滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35409281/
24
4
0
我正在使用面部跟踪进行 HCI(人机交互)。我正在尝试使用面部控制 PC。 我有 3x3 二维网格按钮。1 2 34 5 67 8 9 假设，当前焦点在按钮 5 上。如果我按向上箭头，则焦点将在 2
我正在为蛇和梯子制作一 block 板，到目前为止，我已经按降序打印了板。但是，我需要以正确的方式打印电路板。 编辑“螺旋下降”意味着 100...91 81...90 80...71 ...
我有一个可以响应式调整大小的菜单，因此每次调整大小时 div (#menuWFhover) 的内容都会重新排列，因此 div 根据窗口大小具有不同的高度。 当我使用 jQuery slideDown/
我们从服务器获取数据并附加 ListView 。我们的问题是，当向上/向下滚动时，它首先显示白屏，然后显示数据。向下/向上滚动时，之前出现的白屏应删除 for (var i=0; i");
我想要一个汉堡图标动态改变颜色的代码，以适应网站的黑色部分/部分和白色。它最初是 3 段白色，js 代码几乎是好的和正确的，但是当它在白色部分时它一直闪烁，并在红色和白色之间闪烁。 js var to
我对点击事件的页脚位置有疑问。我正在使用 bootstrap css，我有一个可折叠元素(bootstrap 中的 Accordion )，当它折叠时它有一个名为 .accordion-toggle.
在此代码段中，使用关键帧和动画并显示无/ block ，div 动画以在悬停时向下滑动。 h1 { padding: 20px; } div { width: 100%; background
我需要对一个 float 进行四舍五入。例如 4.00011 。内置函数 round() 总是在数字 > .5 时向上舍入，在 = 0 val *= 10 ** precision r
我正在尝试就地缩小文件。 我正在用另一个文件的内容替换一个文件的内容，完成后我想确保源文件是否小于目标文件，目标文件是否正确收缩。 (为什么:因为dest文件是一个备份，写入media的开销很大，所以
似乎每当我用一个负整数除以一个正整数时，我都需要它向下舍入 (向 -inf)，而不是向 0。但 C# 和 C++ 都向 0 舍入。 所以我想我需要一个 DivideDownward() 方法。我可以用
考虑这个简单的代码: document.addEventListener( 'keypress', function() { console.log( 'press' ); } ); document
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动？我是 Azure 的新手，如果有人能提供一些启发，那就太好了。
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动？我是 Azure 的新手，如果有人能提供一些启发，那就太好了。
我见过几个recyclerview的无限滚动示例，但它们都是向下滚动的。 我想要的是一次又一次地加载我的列表，但无论用户是从上面还是从下面滚动。 正常列表 向上滚动 向下滚动 这样可以通过无限滚动一遍
我正在使用带有 View 的 drupal 7，并且我正在使用我发现的向上/向下文本幻灯片的 jquery 脚本。它有效，但是当我尝试将它与带有 ajax 的 View 公开过滤器一起使用时，它似乎不
*场景 我希望制作一个类似于本网站上的 jquery 效果，它位于主 Flash 添加的右侧: http://www.commbank.com.au/ *问题 我已经开始了，但是用很多方法遇到了一些障
互联网。如果这与其他人没有什么关系，请原谅我，但我会将其留在这里，以防这是一个有效的问题。 我正在尝试创建一个文本区域字段，其中用户每次按下键(a-z)，都会触发背景颜色更改(在数组中列出)。我一直在
我正在创建一个网络前端来控制一个小型机器人。 Ajax 调用将在 keydown 上进行，以启动机器人，并在 keyup 上进行停止。 我的问题是，当按下某个键时，keyup、keydown 和 ke
我在内容容器中有两个 div，一个向左浮动，另一个向右浮动。我正在使用屏幕的整个宽度。左 div 宽度为 1290px，右 div 宽度为 625px。有时，在加载页面时，滚动条会更改可用屏幕宽度的宽
请看这个UI sketch图片，我在某个站点的侧边栏(黑框)中有这个 div，当我向下滚动或向上滚动时，我不希望它隐藏...我希望它在我向下滚动和移动时自行向下移动当我向上滚动时向上滚动，这样它就永远
我是一名优秀的程序员,十分优秀！