腾讯ISUX网页前端代码分析 - 怡然城南_H5之家 - 中国HTML5教程资源分享第一站

看了一下腾讯ISUX网页，无论是pc端还是移动端，展示都挺好看的，先对其代码进行分析如下：

1，先看前三行代码

<!DOCTYPE html>  <html lang="en-US" prefix="og: #">

第一行，很正常，目前的网页都这么写的，H5的时代了；

第二行，大公司总要用注释打写广告；

第三行，lang语言居然是en-US，不解，应该没有什么特殊用意吧；prefix属性，百度了一下，用到了ogp协议，ogp主要是为社交媒体用的；

2，head

<head>    <meta http-equiv="X-UA-Compatible" content="IE=Edge">  <meta content="xEBBvSsVmz"/>  <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  <meta charset="UTF-8"/> <title>腾讯ISUX - 社交用户体验设计</title>  <meta content="ISUX,中国用户体验,腾讯设计,H5,动画,svg,webpack,vuejs,react,webComponents,react-native,人工智能,VR,AR,QQ,QQ空间,原创,创意,平面设计,UI,UI设计,网页设计,插画,动漫,摄影,字体设计,logo设计,版式设计,前端技术,视觉设计,用户研究,交互设计,品牌设计,UI开发,产品设计,市场研究,UX设计,腾讯社交用户体验设计部,Qlippie,QQfamily,PsPlay,Demoo"/> <meta content="腾讯社交用户体验设计，简称ISUX (Internet Social User Experience)，成立于2011年1月11日，是腾讯集团核心、全球最具规模的UX设计团队，专业成员包括用户研究、交互设计、视觉设计、品牌设计、视频动画设计、UI开发、产品设计与市场研究等，至今ISUX分布于中国深圳总部、北京、上海、成都及韩国首尔。ISUX主要负责腾讯社交通讯与娱乐类产品服务的用户体验设计与研究，包括主要服务平台如QQ、QQ空间、QQ音乐、腾讯云、腾讯企点、QQ物联、腾讯课堂、兴趣部落、花样直播、全民K歌、全民影帝、企鹅FM、企鹅MV、天天P图、微云和来电等。"/>    <meta itemprop="name" content="腾讯ISUX - 社交用户体验设计"/> <meta itemprop="description" content="腾讯ISUX - 社交用户体验设计"/> <meta itemprop="image" content="https://qzonestyle.gtimg.cn/aoi/sola/20160624105951_m9z34gIMy2.jpg"/> <link href="https://isux.tencent.com/xmlrpc.php"/>   <link type="text/css" media="all" href="https://isux.tencent.com/wp-content/themes/isux_v5/css/reset.css?v=1494217111"/> <link href="https://isux.tencent.com/wp-content/themes/isux_v5/css/custom.css?v=1494217111"/>    <link type="application/rss+xml" title="腾讯ISUX - 社交用户体验设计 Feed" href="https://isux.tencent.com/feed?variant=zh-hans"/> <link type="application/rss+xml" title="腾讯ISUX - 社交用户体验设计 Comments Feed" href="https://isux.tencent.com/comments/feed?variant=zh-hans"/>  <link href='https://isux.tencent.com/wp-content/plugins/wp-googlecodeprettify/js/prettify.css?ver=4.7.3' type='text/css' media='all'/> <script type='text/javascript' src='https://isux.tencent.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script> <script type='text/javascript' src='https://isux.tencent.com/wp-content/plugins/wp-googlecodeprettify/js/run_prettify.js?ver=1.1'></script>  <link href='https://isux.tencent.com/wp-json/'/>  <script type="text/javascript"> //<![CDATA[ var wpcc_target_lang = "zh-hans"; var wpcc_noconversion_url = "https://isux.tencent.com/"; var wpcc_langs_urls = new Array(); wpcc_langs_urls["zh-hans"] = "https://isux.tencent.com/?variant=zh-hans"; wpcc_langs_urls["zh-hant"] = "https://isux.tencent.com/?variant=zh-hant"; //]]> </script> <meta content="noindex,follow"/>  <meta property="fb:app_id" content="137155036704975"/> <meta property="og:url" content="https://isux.tencent.com"/> <meta property="og:title" content="腾讯ISUX - 社交用户体验设计"/> <meta property="og:site_name" content="腾讯ISUX - 社交用户体验设计"/> <meta property="og:description" content="Tencent Internet Social User Experience"/> <meta property="og:type" content="website"/> <meta property="og:image" content="http://qzonestyle.gtimg.cn/aoi/sola/20160718112032_m2l884XLHH.jpg"/> <meta property="og:locale" content="en_us"/>    <script type="text/javascript">(function (a, e) { function f() { var d = 0; if (e.body && e.body.offsetWidth) { d = e.body.offsetHeight } if (e.compatMode == "CSS1Compat" && e.documentElement && e.documentElement.offsetWidth) { d = e.documentElement.offsetHeight } if (a.innerWidth && a.innerHeight) { d = a.innerHeight } return d } function b(g) { var d = ot = 0; if (g.offsetParent) { do { d += g.offsetLeft; ot += g.offsetTop } while (g = g.offsetParent) } return {left: d, top: ot} } function c() { var l = e.querySelectorAll("[data-lazy-original]"); var j = a.pageYOffset || e.documentElement.scrollTop || e.body.scrollTop; var d = f(); for (var k = 0; k < l.length; k++) { var h = l[k]; var g = b(h).top; if (g < (d + j)) { h.src = h.getAttribute("data-lazy-original"); h.removeAttribute("data-lazy-original") } } } if (a.addEventListener) { a.addEventListener("DOMContentLoaded", c, false); a.addEventListener("scroll", c, false) } else { a.attachEvent("onload", c); a.attachEvent("onscroll", c) } })(window, document);</script>  <style> html { margin-top: 0 !important; } </style>  <script> var global_cat_id = "" </script>  <script type="text/javascript"> var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " "); document.write(unescape("%3Cspan%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1260118664' type='text/javascript'%3E%3C/script%3E")); </script> <script> //声明_czc对象: var _czc = _czc || []; //绑定siteid，请用您的siteid替换下方"XXXXXXXX"部分 _czc.push(["_setAccount", "1260118664"]); </script> </head>  <body>

3，为了处理移动端展示，最主要的是菜单的隐藏与展示，使用了很多媒体查询，主要是custom.css

4，首页的ITEM如何在屏幕宽的时候展示4个，窄一点又展示三个，2个，1个，主要用到的就是#post-area .masonry-post和媒体查询