【利用css实现响应式项目开发 第一篇】
一.网页布局方式
1.固定宽度布局:为网页设置一个固定的宽度,通常以px作为长度单位,常见于pc端网页。
2.流式布局:为网页设置一个相对的kua宽度,通常以百分比作为长度单位。
3.栅格化布局:将网页宽度人为的划分为均等的长度,然后排版布局时则以这些均等的长度作为度量单位,通常利用百分比作为长度单位来划分成均等的长度。
4.响应式布局:通过检测设备信息,jue'决定网页布局方式,即用户如果采用不同的设备访问同一个网页,有可能会看到不一样的内容,一般情况下是检测设备屏幕的宽度来实现。
注:以上几种布局方式并不是独立存在的,实际开发过程中wa往往是相互结合使用的。
二:响应式布局
Responsive design,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使wang网站在手机和平板电脑上有更好的浏览阅读体验。
屏幕尺寸不一样展示给用户的网页内容也不一样,我们利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的css样式,就可以实现响应式的布局。
利用响应式布局可以满足不同尺寸的终端设备完美的呈现网页内容,使得用户体验得到很大的提升,但为了实现zh这一目的不得不利用媒体查询写很多冗余的代码,使整体网页的体积变大,应用在移动设备上就会带来严重的性能问题。
响应式布局常用于企业的官网、博客、新闻资讯类型网站,这些网站以浏览内容为主,没有复杂的交互。
一般对常见的设备尺寸进行划分后,再分别确定为不同的尺寸的设备设计专门的布局方式,如下图所示
类型 | 布局宽度 |
大屏幕 | >=1200px |
默认 | >=980px |
平板 | >=768px |
手机到平板 | <=767px |
手机 | <=480px |
下图是与之对应的媒体查询条件
书写建议:
1.如果是判断最小值(min-width),应该从小到大写 //推荐
2.如果是判断最小值(max-width),应该从大到小写
三:响应式开发
1.什么是响应式开发
a)在移动互联网日益成熟的时候,桌面浏览器上开发的网页已经不能满足移动端的设备的展示与阅读
b)通常的做法式对移动端单独开发一套特定的版本
c)若移动端设备越来越多时开发成本就很大,因为要做所有屏幕的适配
d)响应式开发的目的就是:一个网站能兼容多种终端
e)在新建的网站上一般会使用响应式开发