使用移动CSS改进现有网页 [英] Retrofit existing web page with mobile CSS

问题描述

在现有网页上添加移动专用CSS的好方法是什么？

要求是：

• 非移动浏览器视图应保持原样


• 移动浏览器应该获取不同的CSS（删除某些元素并简化网页） li>
  
• 感兴趣的移动浏览器包括：iPhone和Android。



我长期看待HTML5Mobile样板和其他各种解决方案，但短期来看，我正在寻找一个低功耗的基于CSS的解决方案。




希望只有客户端解决方案（而不是为不同的页面提供服务）。





建议？是否有库/文章/代码片段可以帮助我？

解决方案

查询，可让您根据不同的浏览器解析度和功能提供不同的样式表。其中一个主要的好处是，你不必做浏览器嗅探或任何服务器端的代码，这是一个噩梦，以维持每当几十个新设备上市每月。





虽然浏览器嗅探会要求您为每种类型或分组的设备添加特定的检测代码，媒体查询甚至可以处理您从未听说过的设备。





作为一个假设的例子，这将使您的页面在移动浏览器和小屏幕上显示热粉红色文字：

  @media handheld and（max-width：480px），screen and（max-device-width：480px），screen and（max-width：600px）{
 body {
 color：hotpink; 
} 
} 
  

许多正在使用的媒体查询示例： br>
http://responsivewebdesigns.tumblr.com/




What's a good way to add mobile-specific CSS to an existing web page?

The requirements are:

• Non-mobile browser view should stay as-is
• Mobile browsers should get a different CSS (that removes certain elements and simplifies the page)
• Mobile browsers of interest are: iPhone and Android. Win7 and WebOS would be nice to haves
• The smaller the number of changes the better

I'm looking at HTML5Mobile boilerplate and various other solutions for the long term, but for the short term I'm looking for a low effort CSS based solution.

I'm hoping for a client-side only solution (as opposed to serving a different page).

Recommendations? Is there a library / article / code snippet that'll help me out?

解决方案

The best way to handle this is CSS media queries, which let you serve different stylesheets to different browser resolutions and capabilities. One of the major benefits is that you don't have to do browser sniffing or any server-side code, which is a nightmare to maintain when dozens of new devices come on the market each month.

Whereas browser sniffing would require you to add specific detection code to your script for each type or grouping of device, media queries handle even devices you've never heard of.

As a contrived example, this would make your page have hot pink text on mobile browsers and small screens:

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {
    body {
        color: hotpink;
    }
}

Lots of good examples of media queries in use:
http://responsivewebdesigns.tumblr.com/

这篇关于使用移动CSS改进现有网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！