使用@media screen解决移动web开发的多分辨率问题
当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多。许多大平台、大门户都纷纷推出了自己的移动web版网站。
随着移动设备飞速的发展,移动产品的屏幕规格越来越多。从几年前的320×240像素的屏幕,到现在1920×1080分辨率的屏幕。各种分辨率的屏幕让前端开发的人们叫苦连连,如何使用一种有效的方式来解决各种屏幕分辨率下的用户体验呢?
在css2中就有media type属性,用于判断媒体类型。而在css3中新增了 media query属性用于增强media type属性。因此当css3问世后,这个问题有了新的解决办法。media query属性的是media type属性的增强功能,使media type可以进行条件判断输出对应的css。
media query的使用方法
一、判断媒体类型,引用不同的样式表
<link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调用的样式表文件” />
通过设定屏幕的判断条件,调用对应的css文件。该实例多用于整页面不同风格的css调用与选取,使用该方法可能需要为一个页面制作多份个css文件。
二、判断媒体类型,执行不同的css样式属性
@media screen and (max-width:240px){
.box{width:200px;}
.title{color:red;}
}
上述实例可以出现在外部样式表与内部样式表中。直接在样式表中以@media screen属性标注媒体类型的判断事件,在括号中写出判断条件为max-width:240px;该判断的意思是屏幕宽度大于240px则执行大括号内的样式属性,如果小于240px则不执行。
前端开拓者做了@media screen相应的判断尝试,并在首页与文章列表页加入了@media screen的功能实例。判断样式书写如下:
@media screen and (min-width:1200px){.post_box{width: 45%;float: left;}.c-con{height:140px;}}
如果用户使用分辨率宽度大于1200px的浏览器访问网站,则页面呈现为三栏模式,如下图:
如果分辨率小于1200px则页面会呈现为两栏模式,如下图:
建议在使用判断时,如果只是在样式表内进行判断的话,可以修改部分重要样式来达到修改布局的目的。
通过@media screen与width条件判断,可以事先对页面的宽度进行策划,然后根据不同的页面宽度设定不同的css样式,有效的控制web页面在各种分辨率下的样式表先。
- 本文固定链接: http://www.frontopen.com/1221.html
- 转载请注明: 品味人生 2013年08月07日 于 前端开拓者 发表
使用@media screen解决移动web开发的多分辨率问题的更多相关文章
- @media screen解决移动web开发的多分辨率问题
当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多.许多大平台.大门户都纷纷推出了自己的移动web版网站. 随着移动设备飞速的发展,移动产品的屏幕规格越来越多.从几年前的320×240 ...
- PrintArea打印,@media screen解决移动web开发的多分辨率问题,@media print设置打印的样式
PrintArea打印,局部DIV打印插件,依赖JQuery. github:https://github.com/RitsC/PrintArea 当打印时需要临时改变页面布局,可以使用 @media ...
- 彻底理解和解决移动WEB开发中CLICK点透问题
在移动WEB开发中,有时候可能会出现点透问题,本文将围绕这个TAP点透问题,详细的讲述到底什么是点透,为什么会出现点透,如何避免出现点透,如果不可避免的出现了,如何解决解决移动WEB开发中CLICK点 ...
- 解决使用web开发手机网页关于分辨率被缩放的坑
问题的产生 因为各方面原因,要用网页做界面,开发一个APP.内核使用的是腾讯的x5内核. 把外壳交给前端和设计测试的时候,都汇报:状态栏的颜色太不搭配了,要求可修改 遂启用了安卓4.4版本开始支持的沉 ...
- web开发中目录路径问题的解决
web开发当中,目录路径的书写是再常用不过了,一般情况下不会出什么问题,但是有些时候出现了问题却一直感到奇怪,所以这里记录一下,彻底解决web开发中路径的问题,开发分为前端和服务端,那么就从这两个方面 ...
- 解决@media screen (自适应)IE浏览器不兼容问题
1.解决兼容性问题 (1)页面最顶部必须定义:<!DOCTYPE html> (2)点击:下载 respond.js 文件 (3)引入<script src="respon ...
- 初学web开发——怎么解决无法找到路径的问题
刚刚接触web开发一个月,在接手项目时,总会出项无法找到改路径的问题, 那么,这个是什么原因造成的呢?因为我现在使用的是MVC架构,大部分的原因是在View里创建了视图,但是并未在controller ...
- 移动端web开发——视口
本篇主要是记录一下移动端视口的分类说明和其它的一些知识.在开始之前,先看一个典型的例子: <meta name="viewport" content="width= ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
随机推荐
- Sql order by 和 group BY 如何共同运用?
如果声明了 GROUP BY 子句,输出就分成匹配一个或多个数值的不同组里. 如果出现了 HAVING 子句,那么它消除那些不满足给出条件的组. 如果声明了 ORDER BY 子句,那么返回的行是按照 ...
- SDUT2857:艺术联合会(简单dp)
链接: http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2857 题目解析: 这是去年校赛的题目, ...
- 编译安装MariaDB-10.0.21
一.源码编译安装gcc-5.1.0 1.下载gcc源码包 Download (HTTP): http://ftpmirror.gnu.org/gcc/gcc-5.2.0/gcc-5.2.0.tar.b ...
- Android开发环境配置到第一个程序所遇到的问题
1.安装顺序 先jdk,最后是1.7或1.8吧,配置环境变量:然后是sdk,配置环境变量:sdk安装之后即可以通过SDK Manager进行其他包的安装. 2.sdk及其他包的安装,以一张图表示,对于 ...
- 编译项目报错 lc.exe已退出,代码为-1
错误截图: 原因: Devexpress注册文件不一致造成,如果更改了不同Dev插件版本,会有这个问题 解决办法 删除项目中的licenses.licx文件 在解决方案资源管理器试图中,检索licx, ...
- Linux数据备份与恢复
Linux数据备份及服务器重要数据类别分析 对 Linux 服务器来讲,当然最理想的就是把整块硬盘中的数据都备份,甚至连分区和文件系统都备份,这样如果硬盘损坏,那么我们可以直接把备份硬盘中的数据导入损 ...
- 谷歌技术"三宝"之MapReduce(转)
原文地址:http://blog.csdn.net/opennaive/article/details/7514146 江湖传说永流传:谷歌技术有"三宝",GFS.MapReduc ...
- CentOS的Qt3和Qt4问题
在有的系统中,装有Qt3和Qt4, 在使用qmake生成Makefile后,直接make, 出错,说没有头文件, 如果调用了qt3的qmake,那么上头的INCPATH里的头文件路径也指向了Qt3, ...
- Eclipse配置多个jdk
Eclipse配置多个jdk 步骤: 1,打开windows > Preferences: 2,点击“Add”,新增jdk,选择“Standard VM”: 3,下一步,选择对应版本的jer: ...
- 5309 《Java程序设计》第6周学习总结
教材学习内容总结 输入与输出 InputStream与OutputStream 从应用程序角度来看,如果要将数据从来源取出,可以使用输入串流:如果要将数据写入目的地,可以使用输出串流.在Java中,输 ...