使用@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 最佳实践 ...
随机推荐
- mytest3.py-api接入平台获取数据
mytest3.py-api接入平台获取数据 import base64 import datetime import hashlib import urllib import urllib.pars ...
- (2.13)备份与还原--sql server数据库主要状态和切换路径
SQLSERVER数据库主要状态和切换路径 关键词:数据库状态 一个SQLSERVER数据库会处于很多种状态,例如 ONLINE .RESTORING .RECOVERING .RECOVERY_PE ...
- python web框架 Django的APP以及目录介绍 2
app: migrations 数据修改表结构 admin Django为我们提供的后台管理 apps 配置当前app models ORM,写指定的类 通过命令可以创建数据库结构 tests 单元测 ...
- vs2010 重新配置帮助文档
1.VS2010帮助文件不支持重新配置,这个时候打开C:\Program Files\Microsoft Help Viewer\1.0目录,找到“HelpLibManager.exe.config” ...
- 009-Shell 函数
一.函数定义 linux shell 可以用户定义函数,然后在shell脚本中可以随便调用. shell中函数的定义格式如下: [ function ] funname [()] { action; ...
- [golang note] 包和导入
package的作用 √ package是golang最基本的分发单位和工程管理中依赖关系的体现. √ 每个golang源代码文件开头都拥有一个package声明,表示该g ...
- ModelForm组件
ModelForm组件 Django的model form组件 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,先来一个简单的例子来看一下这个东西怎么用: ...
- HDU 3081 Marriage Match II (二分+并查集+最大流)
题意:N个boy和N个girl,每个女孩可以和与自己交友集合中的男生配对子;如果两个女孩是朋友,则她们可以和对方交友集合中的男生配对子;如果女生a和女生b是朋友,b和c是朋友,则a和c也是朋友.每一轮 ...
- Spring-1-F Dice(HDU 5012)解题报告及测试数据
Dice Time Limit:1000MS Memory Limit:65536KB Description There are 2 special dices on the table. ...
- Akka in action (第一章 介绍Akka)
在本章 概述Akka 了解Actors和Actor系统 Akka的适用范围 在第一章中,会介绍给你Akk的个方面,它能做什么,与现有的解决方案有那些不同.重点关注Akka有哪些功能和使用范围和强大的并 ...