浅谈Web自适应

.class {

float: clear;

}

此种自适应构造一般常用在兼容PC和手机设备，因为屏幕跨度很大年夜，界面的元素以及远远不是改改大年夜小所能知足的。这时刻须要从新设计整界面的构造和排版了:

如不雅屏幕宽度大年夜于1300像素

如不雅屏幕宽度在600像素到1300像素之间，则6张图片分成两行。

如不雅屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。

很多css框架经常用到如许的多端解决筹划，有名的bootstrap就是采取此种方法进行栅格构造的。

跟着移动设备的普及，移动web在前端工程师们的工作中占领越来越重要的地位。移动设备更新速度频繁棘手机厂商繁多，导致的问题是每一台机械的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增长了艰苦，适配问题在当下显得越来越凸起。记得方才开端开辟移动端产品的时刻向设计MM要了不合屏幕的设计图，结不雅可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，欲望有益于诸君。

总结

不管哪一种自适应方法，我们的目标是使得开辟网页在各类屏幕下变得好看：如不雅你的项目定位的用户群仅仅是应用某种机型的人，那么可以采取第一种自适应方法。如不雅你的客户主如果移动端，然则客户的设备类型复杂，建议采取第二种方法。如不雅你大志勃勃地须要建立一套兼容PC、PAD、mobile多端的一体化web应用，那么第三种选择显然是最合适你的。每种方法都有本身的利弊，根据需求衡量短长，合理地实现自适应构造，须要一向的实践和摸索。路漫漫其修远兮，吾将高低而求索。

参考材料

自适应网页设计(Responsive Web Design)
移动前端自适应解决筹划和比较
移动web适配利器-rem

“完全自适应式”是卤煮对越此筹划的叫法，因为卤煮如今找不到官方名称，所以临时就如许叫它。这种解决筹划相对前一种来说进步不少，不仅仅宽度实现了自适应，并且界面所有的元素大年夜小和高度都邑根据不合分辨率和屏幕宽度的设备来调剂元素、字体、图片、高度等属性的值。简单来说就是在不合的屏幕下，你看到的字体和元素高宽度的大年夜小是不一样的。在这里，有人就会说应用的是媒体萌芽熟悉，根据不合的屏幕宽度，调剂样式。卤煮之前也是如许想的，然则你须要推敲到界面上典范多元素须要设置字体，如不雅用media query为每个元素在不合的设备下都设置不合的属性的话，那么竽暌剐若干种屏幕我们的css就会增长若干倍。实际上在这里，我们采取的是js和css熟悉rem来解决这个问题的。

【编辑推荐】

10款Web开辟最佳的Python框架
Web前端主动化入门总结
让后端开辟情何故堪？前端法度榜样猿薪资大年夜曝光
Egret Engine5.0宣布，率先支撑WebAssembly机能大年夜幅晋升
前端跨域请求道理及实践

【义务编辑：枯木 TEL：（010）68476606】

5/5 首页上一页 3 4 5

　　推荐阅读

　　京东“618”在即，这些“京东版”的黑科技你知道吗?

【51CTO.com原创稿件】2017年贵阳数博会方才停止，京东“618”狂欢节却早已打响……早在6月1日，京东集团提议的“618年中购物节”就正式拉开了序幕，京东>>>详细阅读

本文标题：浅谈Web自适应

地址：http://www.17bianji.com/lsqh/35584.html

1/2 1