前端一套代码同时在 pc 和 手机端展示不同的效果，思路分析， css媒体查询

如果你在公司中碰见这样的需求，用过bootstrap的童鞋  肯定上来会想到 boot

如果一套代码 在 同一个域名下  同时能在手机和移动端运行  让客户看到一样的内容 不一样的效果

1. 如果页面复杂的话  

一套代码两个样式     判断用户在那种设备中打开的然后跳转到指定的 网站类型上  

就像百度那样 有两个网站

m.baidu.com   // 是手机站

www.baidu.com  // 是pc站  

 

2. 如果页面简单地话  可以使用 css3 的媒体查询

<meta name="viewport" content="width=device-width, initial-scale=1.0">    这句话 可别忘写了 移动端禁止用户放大

想偷懒省事的话 可以直接使用 bootstrap.css      但是页面很简单地话 还是没必要用boot

注意复杂的页面不适合   响应式    并不是万物可响应哦

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

如果文档宽度小于 375 像素则修改背景颜色(background-color):   

这个375 是移动端的物理像素   苹果6 好像就是这个宽度   可并不是 我们手机的分辨率哦    

根据 屏幕尺寸小于 375的话 就开始书写 移动端样式  同时也隐藏只在pc上展示的元素

body {
    background-color:#f00;
}
@media screen and (max-width: 375px) {
    body {
        background-color: #00f;
    }
}

我们去看下实际效果   在手机端是 蓝色 pc端是红色 的效果    好像很闪眼睛 哈哈  不过大体思路就是这样

 

 

关注我 持续更新前端知识