Css 移动优化-根据屏幕大小有条件加载HTML

我正在重新设计我的移动第一网站。我读过一些与此相关的问题，但似乎没有一个是完整的答案。我在网上搜索发现

在MOBILE-FIRST的代码部分，它指出了针对不同屏幕大小有条件加载图像的最佳方法。我要找的是html元素

<div class="social_buttons">
   <ul>
      <li>google</li>
      <li>twitter</li>
      <li>facebook</li>
      <li>pinterest</li>
   </ul>
</div>

谷歌
推特
脸谱网
品特烈

我不希望从移动设备加载时加载这部分html，但是我希望从桌面计算机调用时加载

使用smashingmagazine的解决方案（使用css有条件地加载）是否可以这样做，还是只应用于图像

---

谢谢你的帮助=）

你可以用javascript来完成。在移动或桌面的情况下，只需做你想做的事情

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // mobile
} else {
 // desktop
}

---

一种方法是根据设备重定向和加载不同的html

看看这个

或者使用jquery插件

我建议使用媒体查询来显示各自的内容，但使用此方法，您可以加载整个HTML，但显示基于设备

有关媒体查询的信息-

像这样

<div class="social_buttons">
   <ul>
      <li>google</li>
      <li>twitter</li>
      <li>facebook</li>
      <li>pinterest</li>
   </ul>
</div>

尝试引导：

@media (min-device-width: 640px) {
.social_buttons{
display:none;
  } 
 }