找回密码
 立即注册

QQ登录

只需一步,快速开始

代码片段

关注:35

所属分类: 资源中心 代码片段

[css3] 根据设备屏幕不同,加载不同的CSS,实现PC端和手机端页面

  [复制链接]
查看: 566|回复: 6
最佳答案
0 

15

主题

107

帖子

1916

积分

专家路上

积分
1916
 楼主| 发表于 2017-1-4 14:26:06 | 显示全部楼层 |阅读模式
本帖最后由 里客云网络科技 于 2017-1-4 14:27 编辑

我们知道,现在手机端的用户非常多,一个网页总不能有PC端,但没有手机端吧?如果用户在手机端打开网页显示的是PC端的网页,显示效果不好,因为手机屏幕太小,网页的元素显示就太小了。我们要开发出自适应的网页,但是自适应的技术比较高,如果不懂的人,可以利用一段代码,实现同一个网站在不同设备上的显示,即加载不同的CSS。 2345截图20170104140837.png
也就是说,我们只需要一个主页文件,网站的内容一样,只是显示的布局不一样。每次更新网站,网页的内容手机端,PC端都是一样的。


我们新建index.html、m.css、pc.css文件
2345截图20170104141740.png

index.html代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <meta name="apple-mobile-web-app-capable" content="yes">
  8.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.         <meta name="format-detection" content="telephone=no">
  10.         <title>加载不同的页面</title>
  11. <link rel="stylesheet" type="text/css" href="pc.css">
  12. <link rel="stylesheet" type="text/css" href="m.css" media="only screen and (max-device-width:480px)">
  13. </head>
  14. <body>
  15. <p style="text-align:center; margin-top: 300px; color:#fff; font-size:20px;">这是一个加载不同CSS的页面</p>
  16. </body>
  17. </html>
复制代码
m.css代码
  1. body{background:#39f;}
复制代码
pc.css代码
  1. body{background:#f00;}
复制代码
我们仔细观察一下index.html的代码,代码<link rel="stylesheet" type="text/css" href="pc.css">是连接到外部的pc.css,<link rel="stylesheet" type="text/css" href="m.css" media="only screen and (max-device-width:480px)">链接的是m.css,但<link rel="stylesheet" type="text/css" href="m.css" media="only screen and (max-device-width:480px)">后面多了一行代码media="only screen and (max-device-width:480px)",意思是说当你的设备屏幕<=480px的时候,才加载这个css,当你的设备屏幕大于480px的时候,就加载上面的pc.css。


下面是手机打开http://www.likeyunba.com/test/device/时显示的效果
148948723809998666.png

下面是电脑打开:http://www.likeyunba.com/test/device/显示的效果
2345截图20170104142449.png


这种方法就可以实现,大家可以这样去做网页,把用户体验做好!如果你学会了,别忘记顶贴!
回复

使用道具 举报

最佳答案
0 

15

主题

107

帖子

1916

积分

专家路上

积分
1916
 楼主| 发表于 2017-1-4 15:02:55 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

17

帖子

95

积分

新人求带

积分
95
发表于 2017-1-4 16:53:12 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

最佳答案
0 

15

主题

107

帖子

1916

积分

专家路上

积分
1916
 楼主| 发表于 2017-1-5 11:50:12 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

最佳答案
0 

15

主题

107

帖子

1916

积分

专家路上

积分
1916
 楼主| 发表于 2017-1-11 16:51:39 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

30

帖子

595

积分

略知一二

积分
595
发表于 2017-1-24 10:35:00 | 显示全部楼层
嘿嘿,回个贴表明我来过。888.aaa005.com
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1

帖子

58

积分

新人求带

积分
58
发表于 5 天前 | 显示全部楼层
确实值得好好看看,顶先












专业代发帖子,发帖宣传,论坛发帖,网络推广,外链代发。
联系QQ:188662616   微信号:188662616

1. 论坛:发帖·顶贴·盖楼·维护·回复·评论·沉帖·负面压制·新闻评论·置顶加精等等~
2. 微博:加粉·直发·转发·评论·转评·话题·阅读量·投票·收藏·点赞·等等~
3. 微信:加粉·转发·点赞·阅读量·分享·投票·等等~
4. 点击:帖子点击率·视频点击率·博客点击率·网站IP·等等~
5. 视频:评论·点赞·等等~
6. sns :转发·评论·等等~
7. 问答:百度知道·360问答·搜搜问答·等等~
8. 投票:各种网络评选投票·等等~
9. 博客:博客发帖·评论·高等级博客发帖
10.qq群:各类群发
11.贴吧 :加关注·包月签到·包年签到·提高贴吧排名

承接各类网络任务!人手多,老手多,多年执行经验,全年无休假。
联系QQ:188662616  微信号:188662616

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com