设计一套方案,适配不一样的分配率

代码github地址:https://github.com/zhongqiulan/dkmother css

效果图:html

可否简述一下如何使一套设计方案,适应不一样的分辨率,有哪些方法能够实现?git

答:流式布局:github

    使用非固定像素来定义网页内容,也就是百分比布局,经过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。web

    这样的布局方式,就是移动web开发使用的经常使用布局方式。这样的布局能够适配移动端不一样的分辨率设备。bootstrap

    响应式开发:框架

    那么Ethan Marcotte20105月份提出的一个概念,简而言之,就是一个网站可以兼容多个终端。愈来愈多的设计师也采用了这种设计。less

CSS3中的Media Query(媒介查询),经过查询screen的宽度来指定某个宽度区间的网页布局。布局

 

    因为响应式开发显得繁琐些,通常使用第三方响应式框架来完成,好比bootstrap来完成一部分工做,固然也能够本身写响应式。flex

    阐述下移动web和响应式的区别:

 

例如:

一:

一道驴妈妈旅游网页引发的响应式布局,移动端布局思考

题目:驴妈妈设计图中的单位转化为rem,实现页面布局; 使用媒体查询为不一样的屏幕设置不一样的rem值; 使用less编写css并编译为css; 页面中的轮播图部分使用'swiper'实现; 

这个文章对咱们所学的全部的布局都有介绍, 对你们了解不一样状况下使用哪一种布局有必定帮助

https://www.cnblogs.com/yanayana/p/7066948.html

那该怎样作到PC和移动端完美适配

这个文章对咱们所学的全部的布局都有介绍, 对你们了解不一样状况下使用哪一种布局有必定帮助

若是你想要单纯用移动端, 就使用rem弹性布局比较好, 若是你须要一个页面适配pc和移动端, 使用响应式解决, 可使用弹性布局flex, 或者直接比例计算, 固然, 你也能够在移动端使用flex布局, 而后rem进行细节修正, 根据实际状况来断定你须要什么样的布局, 使用什么技术

https://www.cnblogs.com/2050/p/3877280.html

参考连接:

https://www.cnblogs.com/yanayana/p/7066948.html

https://www.cnblogs.com/2050/p/3877280.html

相关文章
相关标签/搜索