响应式网页设计方案是目前最适合多屏幕显示的制作方式,因此各大主流搜索引擎自然搜索排名也比较友善,在种种友善环境与移动装置的成熟下,选择用响应式网页设计来制作企业网站是比较正确的选择。只做一个网站就可以符合所有屏幕尺寸,这种响应式网页的设计原理具体是什么呢?下面郑州建站公司经过多次设计经验总结了在日常网站建设过程中响应式网页的设计原理:
一、CSS3 Media Query
Media Query 可以在网页设计时在CSS3中设定不同的屏幕尺寸导出不同的显示方式给用户 ,例如宽度、高度与颜色等等,网页内容会自己判断显示范围,但不用改变内容本身。
二、Media Query 引用方法
Media Query 的导入方式有二种,基本上都是以屏幕大小来判别,并导入不同的CSS来改变网页显示方式。
1. 在 CSS 档案里编写@media来判断使用者屏幕宽度,并导入相对应的CSS。
示例: @media screen and (max-device-width: 370px){ 改变内容 } 解释:如果屏幕小于370px,导入此CSS设定。
2. 在网页的〈head〉〈/head〉中,用 media 属性判断使用者装置宽度,选择载入哪一个 CSS 档案。
示例: link rel="stylesheet" type="text/css" media="screen and (max-device-width: 370px)" href="pcScreen.css"
解释:如果屏幕小于370px,导入pcScreen.css设定。
三、Viewport设定
name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;
maximum-scale设为1 主要是让移动装置无法使用缩放功能来维持网页原本设计样式,没有设定的话整个网页会缩小而浏览困难。
width通常设定为device-width,是用来适应各种屏幕尺寸,如果有这样的设定,CSS就可以把版面宽度预设为100%。
最后,网站制作公司提醒上述三个方式是制作响应式网站的主要观念,但还是需要其他各种网页设计技术的辅助,执行层面是非常的繁复,必须不断的修正才可以达到好的效果。
上一篇:响应式网页设计的四个思考方向
下一篇:网站建设前需要注意什么?六个重要观念要谨记!