云平台杭州易企网络公司
信息化讲堂
当前位置:杭州易企网络公司 >> 信息化讲堂 >> 云平台 >> 浏览文章
云平台

相应式杭州网络公司网站开发时应该细致的事项

标签:相应,杭州,网络,网络公司,公司,网站,站开,开发 发布时间:2024年03月19日 阅读:123次

 

相应式开发是前端开发工作中比较常见的工作内容。随着移动端的发展,网页设计必须考虑到移动端的设计,统一个杭州网络公司网站为了兼容PC端和移动端表现百度搜索排行,必要做成相应式西安人事考试报名,所以关于相应式开发的技术必须掌握。

什么是相应式?

顾名思义,统一个杭州网络公司网站兼容不同的大小的设备。如PC端、移动端(平板、横屏、竖排)的表现风格。

相应式杭州网络公司网站开发时应该细致的事项

必要用到的技术

1. Media Query(媒体查询)

用于查询设备是否吻合某一特定条件,这些特定条件包括屏幕尺寸,是否可触摸,屏幕精度,横屏竖屏等信息。

2. 使用em或rem做尺寸单位

用于笔墨大小的相应和弹性布局。

3. 禁止页面缩放

  1.   

4. 屏幕尺寸相应 
a)  固定布局:页面居中,两边留白,他能适应大于某个值肯定范围的宽度,但是假如太宽就会有许多留白,太窄会出现滚动条,在PC页面上很常见。
b)  流动布局:屏幕尺寸在肯定范围内转变时,不改变模块布局,只改变模块尺寸比例。比固定布局更具相应能力,两边不留白,但是也只能适应有限的宽度转变范围,否则模块会被挤(拉)得不成样子。
c)  自定义布局:上面几种布局体例都无法跨域大尺寸转变,所以适当时候我们必要改变模块的位置排列或者隐蔽一些次要元素。
d)  栅格布局:这种布局体例使得模块之间特别很是容易对齐,易于模块位置的改变用于辅助自定义布局。

相应式设计细致事项 

1.宽度不固定,可以使用百分比

#head{width:100%;}  
#content{width:50%;} 

2. 图片处理
   图片的宽度和高度设置等比缩放,可以设置图片的width为百分比,height:auto;
   背景图片可以使用background-size 指定背景图片的大小。

电话:4000-340-360 传真:4000-340-360 邮政编码:310000
地址:杭州竞舟路229号