探索设计与体验的融合
Fusion design exploration and experience
黄埔新闻动态
News
好的黄埔网络营销公司会给客户提出建设性的意见,善于对客户进行良性引导
您的位置:>> 黄埔网站首页 >> 技术文章
黄埔响应式自适应网页在未来的重要性

   如今浏览网页的用户有手机,平板电脑,手提电脑,台式电脑,分辨率都各不相同,如果使用固定的宽度,不同的设备浏览网页将会出现混乱或不协调的情况,手机浏览器会根据设定调整自己的网页可视区域,通常为980px(根据设备设置而定)。并且,在移动设备上px可能与电脑上的度量不同,这是由于技术的发展,手机的屏幕像素密度越来越高,造成一个像素点可能对应两个物理像素。想要实现响应式网页,需要对整个网页布局进行分析,在此基础上,再考虑以下方法。


   响应式网页(Responsive Web,RW)又称自适应网页,是一种网页设计布局,可以根据访问媒体不同(网页宽高变化)而变化样式,防止网页布局因访问环境而造成布局混乱,影响用户体验。


<meta content="width=device-width, initial-scale=1.0" name="viewport">


这句话可以说写网页必备,首先我们来理解一下这句话的作用。

meta是一个辅助性标签,可以提供网页元信息,方便SEO,对于响应式布局也有帮助。

viewport是设备能够显示网页的那块区域,根据设备的不同,其viewport可能也不相同。viewport有三种,分别是layout、visual和ideal,这三种具体讲解请自行搜索。移动设备默认是layout viewport,但在开发过程中,我们需要ideal viewport。width=device-width正是将宽设置成ideal viewport的状态,initial-scale是设置页面初始缩放值,viewport总共有六个属性:

width:设置viewport宽度

height:设置viewport高度

initial-scale:设置页面初始缩放值

minimum-scale:允许用户最小缩放值

maximum-scale:允许用户最大缩放值

user-scalable:是否允许用户缩放


CSS3推出了许多相对度量单位,相对度量单位是指参考某一元素变化度量,也就是说其并不是一直不变的。

%: 字面意思百分号,根据父元素而变化。如 width:100% 宽度即父元素大小

vw: 视图宽度,根据视图而变化。如width:100vw 宽度即网页视图宽度

vh: 视图高度,根据视图而变化。如height: 100vh 高度即网页视图高度

em: 根据当前对象文本大小而变化(仅用于字体)

rem: 根据根元素文本大小而变化(仅用于字体)

对于一些需要跟随页面变化的元素,应该使用相对度量单位。比如input框

input[type=text] {

width: calc(100% - 50px) // 跟随父元素宽度且少50px

}


    flex布局也是制作响应式网页重要的一环。flex布局可以用来为盒状模型提供最大的灵活性,最大程度上利用网页空间。当网页宽高变化时,flex布局可以将盒子重新排列,实现网页布局整齐。


    对于一些宽高无法固定的盒模型,宽高不能设置成定值(height:100px), 而应该通过百分比,vh或者其他相对度量值。百分比和vh用的比较多,对于页面的主体的部分通常写:width: 100%

// width和height有很多写法,auto、100%、100vw(width)和100vh(height)等等,每种对应不同情况,比如100vh表明盒子高为一视图页面高


注意:不应该所有盒子都设置对象度量。大盒子设置width:100%时,应该思考其内部小盒子需不需要也设置相对度量,如果都设置成width:100%,那么页面变化时,几个盒子都跟着变化,造成样式混乱。一般应该大盒子设置相对,内部小盒子设置定值,这样当大盒子随着页面变化后,如果宽度不够容下所有小盒子,会将其挤到下一行。


媒体查询


@media是CSS3推出的一个新特性,它能识别各种设备,通常类型值设为screen。通过@media可以定义不同宽高下的样式,比如当页面宽度小于800px之间时主体部分背景色变为红色

@media screen and (max-width: 800px) {

   main {

       background-color: red;

   }

}

替换元素

对于一些无法直接通过改变样式的元素,可进行替换,如导航栏,页面缩小时,导航栏项不可以减少,字体大小改变也会导致无法看清等问题,这些将其替换成icon图标,点击即出现导航栏。

响应式框架

当然,现在前端框架已经发展的十分成熟,非必要不需要从零开始布局。推荐几个响应式前端框架:

Bootstrap

自 Bootstrap 3起,Bootstrap就支持响应式布局,且移动设备优先。bootstrap开源且上手简单,十分推荐


Foundation

Foundation也是相当成熟的前端框架,不仅支持响应式布局,也提供多种web UI组件


Ulkit

Ulkit是一个轻量级、模块化的前端框架,帮助开发出快速、强大的Web接口,它有着全面的HTML、CSS和JS集合,易于使用和扩展。


Groundwork


Base

    黄埔网站建设在制作应对多浏览器的网站制作需求,将优先考虑使用响应式自适应网页来实现客户的需求。

相关链接>>
您对此文有什么评论?
类型: 意见建议 内容报错
网友对此文的评论:
未有评论!