1.所有内容均具有响应性，并可以显示在任何尺寸的显示器上。这包括：
·桌面
·移动设备：谷歌 Nexus 5
·平板电脑：苹果 iPad
在所有大小的视口中，图片的相关标题和文本均显示在图片的旁边。
小贴士：用 Chrome 开发工具模拟测试灵敏度，可在页面任意位置点击右键，选择“查看元素”，点击元素标签左侧的长方形，在设备下拉列表中选择苹果 iPad 或谷歌 Nexus 5，然后点击重新加载。
~实际解决:基于浏览器窗口的适配没有完善，使用overflow-wrap: break-word进行换行处理；
2.HTML
中含有 Viewport meta
标签。（即 <meta name=”viewport” …）
别忘记添加 Viewport Meta 标签，它可以让我们在多设备布局设计上省点心。
<meta name="viewport" content="initial-scale=1">
下面这篇文章举了不添加 viewport 将会导致什么问题，可以参考下
快捷提示：别忘记Viewport Meta标签
~实际解决：<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
3.作品集网站将结构（HTML）与设计/样式（CSS）完全分离。HTML 文件主题中不含有任何样式 style 属性。文件中不含有任何样式 style 元素。
注意： <img> 元素中可包含高度 height 和宽度 width 属性。
要将 样式 和 HTML 文件分离, 将样式定义到 css 文件中去
~实际解决：html和css分离；
4.所有代码（HTML 元素名、属性、属性值）均为小写（text/CDATA 除外）。
——<meta charset="utf-8">
——<container> 是不能作为 <body> 的子元素的，建议换成 <div class="container"> ， 利用类 container 设置样式
~实际解决：charset 语句必须得放在 <head> 标签里的第一行；更换charset 位置，更改container节点；
5.其他
————设置box-sizing:border-box;
~将边框和内边距计入元素宽度，从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
————* {
margin: 0;
padding: 0;
}
~清除chrome浏览器下，margin为8px的外边距；
网友评论