搜索
武汉传媒学院武汉传媒学院目录•在浏览器和真实设备上运行•在真实设备上观察和使用设计•渐进增强的开发方法•确定支持的浏览器•分层体验的编码方式•结合CSS断点与JavaScript•避免在生产中使用CSS框架•采用务实的解决方案•尽可能使用最简单的代码•根据视口隐藏、展示和加载内容•验证器和代码检测工具•性能武汉传媒学院10.1在浏览器和真实设备上运行•StyleTitles:由字体、颜色、界面元素组成的设计产品•设计决定断点：从最小的屏幕尺寸开始设计，渐渐使视口尺寸增大来确定断点武汉传媒学院10.1在浏览器和真实设备上运行•.rule{/*小型视口样式*/}@media(min-width:40em){/*中型视口样式*/}@media(min-width:70em){/*大型视口样式*/}武汉传媒学院10.2在真实设备上观察和使用设计•开发早期在不同设备上进行测试•同步工具：保存工作后，不同设备上的浏览器中实时刷新武汉传媒学院10.3渐进增强的开发方法•逐步增强的想法：选择支持的浏览器中选取共有的子集方法编写前端代码，逐步优化代码适应浏览器和设备•应该编写能够精确描述内容的HTML5标记•文本和内容的网站•Web应用或图形化UI组件•在HTML上的优化越多，在CSS和JavaScript优化越少武汉传媒学院10.4确定支持的浏览器•等价的功能，不是等价的外观：核心任务在所有浏览器都可实现，不同浏览器外观可以不一样•浏览器支持标准：•带来的价值•用户统计•兼容当前版本之前的两个版本武汉传媒学院10.5分层体验的编码方式•基本体验：Web的最小可行版本•增强体验：包括所有功能且最美观版本不同浏览器提供不同的体验不包含媒体查询或没添加选择器武汉传媒学院10.6结合CSS断点与JavaScript•响应式项目，在不同尺寸视口不同效果包括CSS和JavaScript•当窗口在断点处调用JavaScript函数，JavaScript返回宽度的像素值武汉传媒学院10.6结合CSS断点与JavaScript例10-1@media(min-width:20rem){body::after{content:Splus;font-size:0;}}武汉传媒学院10.7避免在生产中使用CSS框架•CSS框架：问题：•框架会添加过多冗余代码•个性化不足响应式前端框架前端组件库武汉传媒学院10.8采用务实的解决方案例10-2武汉传媒学院10.9尽可能使用最简单的代码为列表中第五个li添加样式.list-item:nth-child(5){样式;}liclass=”list-itemspec”Item/li.specific-class{样式;}武汉传媒学院10.10根据视口隐藏、展示和加载内容•响应式Web设计准则：在小屏幕上不加载某一部分，在大屏幕上不应该加载•避免在不同的视口上加载新的标记•涉及视觉的部分由CSS完成武汉传媒学院10.11验证器和代码检测工具•验证器：武汉传媒学院10.12性能•减少资源数•减少页面大小•延迟加载非必需资源•保证页面尽快•优化工具