有时候访问别人网页的时候，屏幕不断伸缩的情况下，网页会根据屏幕的大小自动调整信息展示，不同的视感冲击，感觉很酷炫，出于好奇和新鲜感，自己试着做了下。先来看下效果吧。
GIF.gif
1、自适应设计定义 自适应设计（Responsive Design）是指创建网站时仅用一套代码即可令它适应各种不同的屏幕尺寸。2010年，Ethan Marcotte提出了”自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。 2、允许网页宽度自动调整 首先，在网页代码头部，加入一行viewport 元标签 <meta name="viewport" content="width=device-width,initial-scale=1"/>//网页默认等于屏幕宽度，原始缩放比例为1.0，即网页初始大小占屏幕面积的100%。 浏览器推出了“viewport meta”标签，许多移动浏览器现在都支持这个标签，W3C 协议定义 viewport meta 目前还属于草案，很多人都會在html head 处加上 viewport 这个meta data。 viewport设置属性如下： width：可设定数值，或者指定为 device-width height：可设定数值，或者指定為 device-height initial-scale：第一次进入页面的初始比例 minimum-scale：允许缩小最小比例 maximum-scale：允许放大最大比例 user-scalable：允许手指缩放，1 or 0 (yes or no) 3、CSS3 Media Query 自动探测屏幕宽度，然后加载相应的css文件 media queries是一个非常好用的、强大的工具，它可以实现样式跟随屏幕分辨率而定。自适应设计的关键是根据屏幕的宽度（width）来实时加载备选的样式或增加特定的样式。 Media Query的使用方法 首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： css <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 参数解释： width = device-width：宽度等于当前设备的宽度 initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允许用户缩放到的最大比例（默认设置为1.0） user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面） 使用： @media 设备类型 and （设备特性）{样式代码} 4、HTML代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>foodsense</title> <link rel="stylesheet" type="text/css" href="common.css"> </head> <body id="home-page"> <div id="wrap"> <header role="masthead"> <h1 id="branding">Food Sense</h1> <nav> <ul> <li id="t-tastemakers"> <a href="#">Taskmakers</a> </li> <li id="t-blog"> <a href="#">Blog</a> </li> <li id="t-vendors"> <a href="#">The A-List</a> </li> <li id="t-contribute"> <a href="#">Contribute</a> </li> <li id="t-about"> <a href="#">About</a> </li> </ul> </nav> </header> <div id="content"> </div> </div> </body> </html> 5.CSS代码 以下是CSS部分代码展示，全部代码请查看https://github.com/SiHao24/adaptation css /*大一点的PC*/ @media only screen and (min-width:1176px){ body{ width: 1080px; } #content { float: right; width: 896px; } } /*retina 屏幕 图片要显示的更清晰 需要两倍大的图片*/ /*最小设备的像素比 设定为2 device物理设备-pexil像素-ratio 物理像素点 */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { header h1#branding { background-position: left bottom; background-size: 120px auto; } } /*媒体选择器 手机*/ @media only screen and (max-width:767px) and (max-width:480px){ body { width: 480px; padding: 0; } header[role="masthead"]{ width: 100%; margin: 20px 0; } header h1#branding { margin-left: 20px; } nav { top: 65px; right: 25px; width: 315px; height: 20px; font-size: .75em; background: transparent; border-bottom: none; box-shadow: none; } nav ul { position: absolute; right: 0; } nav li { display: inline; margin: 0; } nav a { float: left; margin: 0 0 0 4px; padding: 5px 5px 0 5px; } } /*竖着拿手机*/ @media only screen and (max-width:480px){ header[role="masthead"] { width: 100%; margin: 69px 0px 29px; } body { width: 320px; padding: 0; } header h1#branding { margin: 0 auto; } nav { top: 0; left: 0; width: 100%; height: 100%; font-size: .75em; border-bottom: 1px solid #E5E5E5; box-shadow: 0 1px 0 #f5f5f5; } nav li { display: inline; margin: 0; } nav li#t-tastemakers a, nav li#t-blog a, nav li#t-vendors a, nav li#t-contribute a, nav li#t-about a { background-image: none; } nav a { float: left; margin: 0; padding: 16px 7px 6px; } } 好吧，代码确实很长，在我个人看来，实现网页自适应就是代码重复重复在重复，但是相比写两个页面(一个PC端，一个移动端)来说，这样就很不错了。你可能会说，CSS最前面的代码为什么不用(*)呢？这样的写法相对来说，性能跟好，因为它的查找速度跟快，跟利于浏览器的查询。在HTML结构中，我们写的最多的就是div。好像哪个地方不用div，心里就觉得不舒服，有时候更多的使用div就会给我们写CSS带来不必要的麻烦。在上面的HTML结构中，我们可以看到header,nav标签，在HTML结构中使用语义化标签是好的选择，这样，结构更好,更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高,因为结构清晰,so易于阅读)，更有利于特殊终端的阅读(手机,个人助理等）。 制作一个响应式网站，就相当于有了三个网站，电脑、手机、平板都能完美显示。网站的版块可随着设备屏幕的不同尺寸自动改变位置，网站文字可以在不同设备显示合适的大小，无需让用户将局部放大、缩小查看（这不就是我们追求的增强用户体验么）。让使用不同设备访问的用户都能获得最佳的浏览体验。响应式设计可以为电脑、手机、平板等不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，已成为大势所趋。 结语 文章有描述不当的地方，跪求批评指正，本人邮箱2441284795@qq.com.欢迎骚扰，互相学习。
网友评论