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

问题描述

问 题

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

解决方案

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

这篇关于javascript - 怎么让html页面在手机和电脑采用不同的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！