网站建设员工分工,汽车网络营销策划方案,一个人建网站赚钱,wordpress关注公众号发送验证码前面的话 随着移动互联网的兴起#xff0c;不同设备的分辨率相差较大#xff0c;如果在不同的设置上显示同一个页面#xff0c;则用户体验差。响应式网页设计是一种方法#xff0c;使得一个网站能够兼容多个终端#xff0c;而不用为每个终端制作特定的版本。它使得一个网站…前面的话 随着移动互联网的兴起不同设备的分辨率相差较大如果在不同的设置上显示同一个页面则用户体验差。响应式网页设计是一种方法使得一个网站能够兼容多个终端而不用为每个终端制作特定的版本。它使得一个网站可以在任何类型的屏幕上都可以被轻松地浏览和使用。采用响应式设计在不同设备中网站会重新排列展现出不同的设计风格以完美的适配任何尺寸的屏幕 设计原则 关于响应式设计有渐进增加和优雅降级两个设计原则 渐进增强(progressive enhancement)是指基本需求得到满足、实现再根据不同浏览器及不同分辨率设备的特点利用高级浏览器下的新特性提供更好的体验。比如圆角、阴影、动画等 优雅降级(graceful degradation)则正好相反现有功能已经开发完备但需要向下兼容版本和不支持该功能的浏览器。虽然兼容性方案的体验不如常规方案但保证了功能可用性 移动优先的响应式布局采用的是渐进增强原则制作响应式网站时先搞定手机版然后再去为更大设备去设计和开发更复杂的功能。特征是使用min-width匹配页面宽度。从上到下书写样式时首先考虑的是移动设备的使用场景默认查询的是最窄的情况再依次考虑设备屏幕逐渐变宽的情况 由简入繁易由繁入简难。如果是桌面优先布局端是桌面端代码只有在media中才是手机端代码加载了多余的桌面端代码。如果是图片文件则下载的无用资源更多 无论从界面设计还是代码执行效率的角度而言移动优先都有明显优势 三要素 响应式设计包括三个要素弹性布局、媒体查询和弹性图片 弹性布局和媒体查询已经在其他博客中详细介绍下面来重点介绍下弹性图片 弹性图片也称为响应式图片是指图片能够跟随父容器宽度变化而变化同时宽度受限于父容器不可按照图片原始尺寸展现 因此最简单的响应式图片设置max-width为100%即可 img{
max-width: 100%;
} 只有一张图片的情况下采用上面代码即可。如果提供了高清图要根据设备大小加载不同的图片则需要额外的处理。有如下几种处理方式 1、采用picture元素IE浏览器、android4.4.4-浏览器不兼容 picture
source media(min-width:50em) srcsetimg/l.jpg
source media(min-width:30em) srcsetimg/m.jpg
img srcimg/s.jpg alt#
/picture 2、采用img元素的srcset和sizes属性IE浏览器、android4.4.4-浏览器不兼容 img
srcimg/480.png
srcsetimg/480.png 480w,img/800.png 800w, img/1600.png 1600w
sizes(min-width:800px) 800px,100vw
/ 3、采用js根据window的resize事件修改图片的路径 function makeImageResponsive(){
var width $(window).width();
var img $(.content img);
if(width 480){
img.attr(src,img/480.png);
}else if(width 800){
img.attr(src,img/800.png);
}else{
img.attr(src,img/1600.png);
}
}
$(window).on(resize load,makeImageResponsive); 4、后端配置前端传递给后端当前设备的一些特征后端通过这些特征决定做怎样的响应。但目录两个后端响应式解决方案Responsive_Images和Adaptive-Images都不再维护 优缺点
【优点】 1、减少工作量网站、设计、代码、内容都只需要一份 2、节省时间 3、解决了设备之间的差异化展示 4、搜索优化 5、更好的用户体验
【缺点】 1、需要加载更多的样式和脚本资源加载速度受到影响 2、设计比较难精确定位和控制 3、老版本浏览器兼容不好 响应模式 下面介绍四种响应模式
【Column Drop 列下沉】 手机上每一个大块单独占据一行随着屏幕尺寸拉伸会在同一行上形成多个 column 列
【Mostly Fulid 基本流体式】 基本上跟 Column Drop 一样但是有一点点“固定布局“的特点当到达一定宽度后主体内容部分不再变宽成为固定宽度
【Layout Shifter 变换式】 变换式也就是不必遵循原有内容顺序可以根据最佳展示需要来调整大块顺序
【Off Canvas 抽屉式】 抽屉式屏幕不够宽的时候隐藏通过按钮呼出。足够宽的屏幕上始终显示
