响应式网页设计简单入门

2019年11月21日 阅读数:145
这篇文章主要向大家介绍响应式网页设计简单入门,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

文章表达的中心思想就是最后的那句引用"最好的设计是尽可能少的设计"。最重要的是我意识到平时咱们都忽略了一个常识:一张未经加工的原始HTML文档就已是响应式的了,根本不用什么CSS media属性或者指定不论什么样式。javascript

经过查看HTML代码发现做者果真留下了一些信息,因而在twitter上找到他表达了我对他的膜拜之情以及想把如此精华的文章翻译成中文的意愿。php

做者很是爽快地答应了23333~~(X___X)~~。css

因而就有了相同奇葩的中文版本号:妈逼的站点。原文的精髓可能由于我自身对这类表达的驾驭的不够而丢失了一些。但多少仍是能够方便嫌英文阅读麻烦的同窗们围观的了。html

 

固然以上全是扯淡。一如做者所指出的,至关讽刺。java

回到正题。各类屏幕尺寸满天飞的时代怎样让站点自适应的究极解决方式:响应式设计(Responsive Design)。web

构造主要的HTML页面

一个简单的博客页面

始终认为再多口水都没有一个生动鲜明的样例来得实在,如下经过对一个普通HTML页面的改造来体验什么是响应式设计及怎样达到。浏览器

如下构造一个主要的HTML页面,它包括站点导航菜单,正文,图片。側边栏。表格式的布局以及页脚信息。app

是个很完整而中庸的布局。差点儿是常见的博客版面。ide

 

 

文章内容填充

剩下文章部分需要填充点内容。正好MS Word有这样一个产生随机文章的彩蛋。函数

用法是新建一个word文件而后打开输入" =rand(3,10) " 再回车。当中rand 函数接收两个參数,第一个表示要产生多少个天然段。第二个表示每段多少行。

因此上面回车后咱们会获得一篇由3个天然段组成的文章且每段有10行。

 

而后再另存为网页文件:

最后可以在浏览器中经过查看源代码把包括内容的<p>标签拷贝到咱们的代码中就能够。

同一时候这里有一个专门产生填充内容的站点Fillerati。可以定义篇幅。做者信息。标题等。

固然以上两种做法多少有点装逼与作做的感受。你全然可以随便复制点什么东西来做为内容填充的 一_一|||。

填充内容后HTML变成这样

 

最后出来的效果看起来是这种:

最后为了让側边栏更有意义一点,给文章正文加上一些子标题同一时候给側边栏里的元素加上锚点链接可以在文章的子标题间进行导航。

 

主要的样式

最后加上一些样式让整个页面看起来更正常些。

咱们首先去掉body元素的默认外边距,去掉列表元素前面默认的加点,把菜单里的超链接的下划线也去掉。

再修饰下字体及正文中的三个方块div以及其它,最后的样式代码差点儿相同是这种:

当中,因为側边栏和文章向左浮动了。为了让页脚不从最底跳到文章的后面跑到顶部去,要清除页脚footer两边的浮动。

最后页面看起来着很少是这个样子的

动态载入样式表

接下来的工做是让页面成为响应式的。

听起来认为是一个全新的领域,但事实上平时咱们已经在实践了。比方当指定元素的尺寸时,使用百分比而不是固定像素的大小时。这种元素就具有自适应屏幕的能力。最多见的就是指定元素宽度为100%。这样窗体缩放或屏幕不一样一时候元素始终占领屏幕整个宽度。

一些不太有用的实践是针对不一样屏幕尺寸载入不一样的样式表,这事实上至关于为不一样尺寸写不一样的样式表,感受维护起来不那么方便。

经过在引入样式表时使用media属性可以控制什么尺寸的屏幕使用哪一个样式表,因而咱们可以实现手机訪问时下载手机版样式。电脑訪问时下载正常样式。

 

上面代码指定假设设备宽度小于320px则调用 "mobile.css"样式表。

我的认为这样为一个网站写多个分别的样式表不怎么好。因此这里就很少说了。

Viewport

响应式设计第一件需要作的事情就是在head标签里指定viewport meta属性。

Quick Tip: Don't Forget the Viewport Meta Tag》这篇文章很是好介绍了Viewport是的原因及做用。

简单说来在手机(iPhone Safari)上訪问网页时它默认会对网页进行缩放。尽量多地在屏幕上展现整个页面的内容。而缩放以后的效果可想而知。一个在电脑上正常展现的页面被缩放进手机屏幕(通常是240*320)里面后。很是难阅读。

同一时候由于默认使用缩放,那么你事先设计好的在小屏幕上使用的样式将不起做用。也就是说手机上展现的是电脑版本号的一个缩小版。

咱们看MDN上给出的样例截图。

而在代码中指定viewport,则可以让开发人员指定网页视图区域及缩放比例等。这样就能修正由浏览器本身主动缩放带来的影响。

经过咱们指定例如如下代码:

 

 

 

表示使用设备宽度(即设备的屏幕宽度)并且缩放指定为1也就是不缩放。

你可能会问这样指定以后岂不是仅仅能在手机屏幕上显示站点的部分。比方左上角。这时候正是响应式网页设计起做用的时候了。假设你专门为小屏幕的訪问进行了优化比方在CSS中使用media属性(后面会讲到),那么当手机訪问时会调用对应的样式规则,而不会仅仅显示整个站点的一部分。

字体缩放

指定固定像素的字体大小是咱们设计中常用的方式,但假设你想字体大小更具弹性的话。不妨使用相对大小,CSS中比較常用的指定字体相对大小的单位有百分比,em以及CSS3新增的rem。

首先咱们指定整个文档的字体大小为100%。表示页面字体大小为浏览器默认大小的100%。

再来看看em与rem。

em单位一如他的发音它的基准单位是一个m字母的高度,同一时候它是指定相对于父级的元素中的相对大小。也就是说指定为em的元素字体大小是经过对上一层元素的字体大小计算得来的。

 

上面外层div字体大小为15px。同一时候指定内层p元素字体大小为2em,因此p元素实际的字体大小为15px*2=30px。这点可以经过查看浏览器开发工具里面"计算后的样式"获得证明。

但需要注意的是em有个问题。正因为他会相对于低级元素来计算本身的样式。因此在层叠很是多的状况下,可能出现意料以外的结果。