怎么让html页面在手机和电脑采用不同的样式？

Question

怎么让html页面在手机和电脑采用不同的样式？比如百度首页https://www.baidu.com/，用电脑和手机登录的时候是不一样的内容。

Answer 1

一般来说，做法分两种，一是前端，二是后端。
前端的做法，是用响应式布局设计，CSS中的media query自动根据客户端的分辨率来使用相应的样式，甚至显示、隐藏某些页面元素。如果不想自己踩坑，试试twitter家赫赫有名的Bootstrap。
后端的做法，是根据用户浏览器发来的user-agent判断是否手机版，如是，则使用手机版模板，否则使用桌面版模板。这里的坑主要是后端怎么做缓存的问题。也有很多站点是在判断出用户来自手机后，直接跳转到另一个专门的移动版网站，比如 京东 这可能不是你想要的，但仍不失为一种方案。判断是否来自手机，有成熟的开源方案：http://detectmobilebrowsers.com/

Answer 2

用css3的媒体查询，针对不同屏幕尺寸写样式。@media screen

Answer 3

这是响应式布局，需要在不同的设备下加在不同的CSS改变页面的表现形式

Answer 4

你所说的是响应式布局，针对不同屏幕写不同的样式。从而实现显示不一样的效果。你可以了解css的媒体查询，或者前端框架bootstrap之类的。