× 首页 Web全栈开发 数据分析师DA 商业实习 学员案例 关于我们
长按扫码报名
+1 647-41-7219

扫码报名

chloezhang
05/17/20 23:45

之前的文章中我们提到,利用CSS可以根据设计师的设计做出来漂亮的网页,但是不少同学表示,网页就是给电脑设计的,不理解为什么要做到电脑端和手机端的同时适配。其实原因很简单,随着科技的进步和技术的发展,手机是人人都拥有,而且便利化程度最高的。试想我们早晨睁眼之后,第一件事一定不是开电脑,而是看手机。因此,也会出现越来越多的在手机端查看网页的情况,因此,在设计网页时,我们不仅要考虑到电脑端的情况,更要考虑到手机端的用户体验。

有的程序员用CSS设计出的PC端网页可能是这样的:

是不是美美哒?但是同一个网页,在手机端打开却是这样的:

页面杂乱而没有顺序,感觉好像只是简单的等比缩放而没有做过设计。并且由于手机的品牌不同,屏幕大小也不同,因此移动端的网页设计需要考虑到不同屏幕大小的适配,否则就需要用户手动进行缩放,用户体验就会大大降低。

传统的做法是写两套样式文件,根据js判断手机还是电脑,来引入相应的css。通过Link方法引入媒体类型,也就是说在<link>标签引用样式的时候,通过link标签中的media属性来指定不同的媒体类型。这种方式引入媒体类型时常跟着引用的样式文件走,如下所示。

<!--手机端-->
<link rel="stylesheet" type="text/css" href="style_phone.css" media="screen and (max-width: 960px)"/>
<!--电脑端-->
<link rel="stylesheet" type="text/css" href="style_PC.css" media="screen and (min-width: 960px)"/>

在这里我们可以加入JS做判断,根据客户端输出对应的样式。但这个传统方法会比较麻烦,而且要在css和js都写东西。现在我们单纯的使用CSS就可以解决这个问题,方法就是使用 @media 查询,它是CSS3中引用的一个新特性,翻译为媒体查询,可以直接写在<style></style>中间或者外部样式文件中。利用这个媒体查询,我们可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是当我们需要设置设计响应式的页面,@media 是非常有用的。当我们重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

这里简单举例一下,例如,查询媒体是否是屏幕,屏幕尺寸是否小于787px:

@media screen and (max-width: 787px){
  /* 手机端CSS代码 */
}
 
@media screen and (min-width: 787px){
  /* 电脑端CSS代码 */
}
以上就是最经典判断是电脑端还是手机端的一小段代码。

而同时,媒体查询的功能原不仅如此,比如说手机端也会存在横屏还是竖屏,如果只设计竖屏,那么横屏下内容排版就有可能还是很杂乱。因此,我们可以有以下代码根据横屏竖屏来进行判断显示。

@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*横屏*/
}

也许你以为使用了@media就可以大功告成,但事实并非如此。比如说上面那个网页,使用了@media后,效果却如下图:

出现这样的情况是因为,我们在css里把代码写得太固定了。比如说,这名程序员在写代码时把width写成了绝对值,那么出现的问题就是元素的混乱。因此,在写自适应网页的时候还要注意以下几点:

一、不能使用绝对的宽度和高度。由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素只能指定百分比宽度:width: xx%;或者width:auto;

二、不能使用绝对的字体大小。这是很多程序员都有可能忽略的问题。使用px规定字体大小,会出现屏幕缩小后字体完全看不清的情况,因此,在写自适应网页时我们要使用相对大小(em)。比如说h1 {font-size: 1.5em;}意思时h1的大小是默认大小的1.5倍,即16*1.5=24px。这样的代码可以保证屏幕的缩放不影响显示。

三、流动布局。流动布局的意思就是各个区域的位置不是固定的,而是浮动的。比如说我们可以使用display: flex来使组件浮动。但是使用的时候也要小心,需要进行不同尺寸的的测试,否则的话屏幕的缩放会使得浮动的div随便跑。

四、图片的自适应问题。网页中图片是难以避免的,因此除了布局文本外,还要注意自适应网页必须实现图片的自动缩放,这只要一行CSS代码:img { max-width: 100%;},这行代码对于大多数嵌入网页的视频也有效,可以写成:img, object { max-width: 100%;}。此外需要注意的是,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:img { -ms-interpolation-mode: bicubic; } 或者,Ethan Marcotte的imgSizer.js。

做出自适应的网页是一个程序员的自我修养,也是时代的进步对程序员的新要求。因此,作为一个新时代的程序员,必须要注意到这些细节性的问题,努力做到客户体验的最优化。

再苦再累,有mark2Win在你身边,我们是你IT路上最强大的后盾。

你可能感兴趣的Posts