怎么建设响应式页面布局呢?需要注意什么?

2022-04-29    分类: 网站建设

响应式页面相信大家都不陌生了,在当今的互联网世界几乎随处可见。今天跟大家分享一下响应式页面布局的原理和基础知识,希望大家对响应式页面有个较为全面的把握。



<a href=网站制作3-2020.11.02.jpg"/>


原理


随着显示终端设备的多样化,出现了各种尺寸的屏幕。而传统的网页主要针对桌面电脑而设计和制作的,电脑显示器屏幕虽然也有多个规格,但相对固定,页面内容区的版块宽度一般也设置为980px。而移动互联网的发展,各种屏幕的手机、pad等出现后,情况变得复杂,但是毕竟移动是趋势,为了给移动端查看网页更好的体验,必须做适合于移动端设备的页面。


那么怎么建设响应式页面布局呢?


一个方法是为不同的设备专门制作对应的网站:当用户访问的时候,还是访问PC的域名,然后识别用户的设备,跳转到对应的专门移动端页面,这也就是很多网站m.域名的由来。另一个方法是,和PC同样的页面,当用户访问的时候,不根据用户的设备类型,而是根据用户的设备的屏幕大小,然后对页面应用与PC端不同的样式,使这个页面在这个设备上看起来像是为移动端专门做的页面,这就是现在流行的响应式页面设计——Responsive Design。


两种方法的优劣显而易见。第一种方法开发、运营、推广各种成本几乎就double了,但可以提供更为专业的移动端体验,所以说,除非这个网站盈利够大,要求很高,而且主要是有钱,可以这么干。第二种方法就是两个字——省事,就是编写一个页面,适应所有设备。


下面开始介绍这种省事又酷炫的方法。


基础


meta标签设置视口(viewport)


首先说说viewport,也就是移动开发中经常提及的viewport,当然移动设备的viewport还涉及到物理像素和逻辑像素的问题,在此不做更深的讨论。总之,这个viewport是指网页浏览器(不管是PC还是移动端)中呈现网页的区域,站在用户的角度来说,就是用户能看到的地方。正常来说,这个视口的宽度和设备宽度(屏幕宽度)是一样的,但也有例外,比如当你缩放拖拽浏览器的时候,视口也会随之变化(这也是个检查页面是响应式效果的小窍门)。


视口的宽度获取是响应式设计的基础,响应式页面的响应也就是响应视口宽度的变化。那该如何准确获取视口宽度呢?


两种思路。


一种是用JS获取并且修改CSS。但这种方法除了有js无法使用的风险,更主要的是结果并不是我们想要的。通过document.documentElement.clientWidth获得的设备宽度是厂家设置的宽度(也就是竖屏时候的宽度),也就是当横屏的时候,js获取的还是原来的宽度,这就是实际情况不符了。


另外一种方式是通过设置HTML meta标签来约束视口,其实是控制浏览器如何来渲染网页。代码为:



其中“width=device-width”设置视口为设备宽度,“initial-scale=1.0”设置初始化的视口大小是1.0倍


“maximum-scale=1.0”规定允许放大的大倍数是1倍,“user-scalable=no ”不允许缩放视口,这样保证了与设备显示宽度一致。


CSS媒体查询(Media Query)


CSS媒体查询是响应式页面的核心所在,主要功能是对不同的宽度做出不同的CSS动作(响应),并将这种动作告知浏览器。媒体查询的语法是@Media 和 and操作符,分别查询设备类型和设备属性。比如


@media screen and (min-width:900px){


body{background-color:blue}


}


意思是对所有的屏幕,当宽度大于等于(最小宽度)为900px的时候,应有此样式。比如设备宽度为980px的时候,body的背景颜色设置为蓝色。


同样,可以用and连接多个条件,做地更细化。


@media screen and (min-width:600px) and (max-width:900px){


p{ color:red}


}


意思是对所有的屏幕,当宽度大于在600和900像素之间(包含),将P标签内容的颜色设置为红色。


需要注意的是,IE一些低版本的浏览器如IE6、7、8是不支持媒体查询的,尽管已经很古老,但还是要避免,所以需要先写一个基础的CSS,一些特殊的需要变化的CSS代码则可以在媒体查询里。



创建


有了以上的基础,我们结合流式布局和栅栏布局概念,就可以自己开着手开发响应式页面,当然也可以利用其它现有的工具来提高开发速度。


目前主流前端UI框架都是响应式的,比如Bootstrap、jquery UI、dojo等。下面以Bootstrap为例,师范如何快速创建一个响应式页面。


先到bootstrap官网下载响应的文件,或者你可以用线上的,不过还是建议下载到本地。


注意可以把css和js文件路劲换成本地路径(相对路径),其中bootstrap.min.css和bootstrap.min.js是Bootstrap的核心文件,而bootstrap.min.js是依赖于JQ的,所以,JQ必须在bootstrap.min.js之前加载。这样,你就结合Bootstrap的栅格系统和各种组件搭建自己的响应式页面了,另外,如果你觉得Bootstrap的样式不好看,你可以借助媒体查询,在bootstrap.min.js之后引入自己的自定义css覆盖默认的样式。


本文题目:怎么建设响应式页面布局呢?需要注意什么?
链接地址:https://www.cdcxhl.com/news/147236.html

成都网站建设公司_创新互联,为您提供网站建设App设计静态网站云服务器网站设计公司网站导航

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都定制网站网页设计