龙岗网站建设,龙岗网站建设,龙岗网站优化,龙岗网站设计
 
 
建站常识
/go100.net
 
网站建设相关概念知识
给建站新老手推荐3个CS..
如何挑选网站关键词?
HTML中DIV的浮动、..
龙岗网站建设要注意网站导航
CSS中的两种选择器id..
怎么解决网站在在e7、8..
唯品会周年庆 ..
html5建站需要注意点..
jquery设为首页、加..
 
您当前的位置:
  网站建设
 
自适应网页设计要点 发布人:龙岗网站建设
分享到:
发布时间:2014-10-13

随着智能手机、平板电脑的普及,用移动设备上网的人越来越多。为适应各种设备下的分辨率,对于网页设计师的要求越来越高。

现在的分辨率小至320px,大至2000px以上,这个范围变化很大。因此肯定不能用固定宽度的设计方案。那么要如何在各种不同的分辨率下呈现同样的页面呢?答案就是用HTML5+CSS3的Media Queries(媒体查询)相关技术各种设备的浏览器响应来进行网页的设计。由于老的浏览器不支持HTML5+CSS3,可以用html5.js和css3-mediaqueries.js来解决,特别是IE9以下的老浏览器。

Media Queries用法:

下面表示屏幕宽度小于400px(max-device-width: 400px)就加载400.css文件
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)"   href="400.css" />

 

下面表示屏幕宽度介于400px至600px时就加载400_600.css文件
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="400_600.css" />

 

另外也可以用CSS中的@media规则达到同样的效果,如:
@media screen and (max-device-width: 400px)
{
 css代码
}

 
温馨提示:本内容发布于龙岗网站建设(http://www.go100.net),欢迎您转载,请保留版权!
 
 
上一条: 谈万网支持php虚拟网站空间需要注意的三点
下一条: 网络公司的困惑网站设计困顿之路
 
 
[ 相关更新 ]
· 龙岗网站建设讲述当前建网站需要注意的要点
· 为什么要选择做响应式网站
· 什么是响应式网站
· 流量多样化才能让网站更加健全
· 微信网站开发需要懂得哪些技术?
 
Site Map
 
· 套餐报价
· 功能模块
· 售后服务
 
· 网站优化
· 优化报价
 
· 域名注册
· 空间租用
· 企业邮局
 
· 外贸网站建设
· 模具网站建设
· 五金网站建设
· 家具网站建设
· 其他类案例
 
· 网站建设
· 网站优化
· 网络营销
· 常见问题
· 建站教程
· 热门话题
 
· 公司介绍
· 新闻动态
· 我们的优势
· 付款方式
· 联系我们
 
在线客服