当今移动设备的发展已经越来越迅速,移动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页面在各种分辨率下的样式表先。

使用@media screen解决移动web开发的多分辨率问题的更多相关文章

  1. @media screen解决移动web开发的多分辨率问题

    当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多.许多大平台.大门户都纷纷推出了自己的移动web版网站. 随着移动设备飞速的发展,移动产品的屏幕规格越来越多.从几年前的320×240 ...

  2. PrintArea打印,@media screen解决移动web开发的多分辨率问题,@media print设置打印的样式

    PrintArea打印,局部DIV打印插件,依赖JQuery. github:https://github.com/RitsC/PrintArea 当打印时需要临时改变页面布局,可以使用 @media ...

  3. 彻底理解和解决移动WEB开发中CLICK点透问题

    在移动WEB开发中,有时候可能会出现点透问题,本文将围绕这个TAP点透问题,详细的讲述到底什么是点透,为什么会出现点透,如何避免出现点透,如果不可避免的出现了,如何解决解决移动WEB开发中CLICK点 ...

  4. 解决使用web开发手机网页关于分辨率被缩放的坑

    问题的产生 因为各方面原因,要用网页做界面,开发一个APP.内核使用的是腾讯的x5内核. 把外壳交给前端和设计测试的时候,都汇报:状态栏的颜色太不搭配了,要求可修改 遂启用了安卓4.4版本开始支持的沉 ...

  5. web开发中目录路径问题的解决

    web开发当中,目录路径的书写是再常用不过了,一般情况下不会出什么问题,但是有些时候出现了问题却一直感到奇怪,所以这里记录一下,彻底解决web开发中路径的问题,开发分为前端和服务端,那么就从这两个方面 ...

  6. 解决@media screen (自适应)IE浏览器不兼容问题

    1.解决兼容性问题 (1)页面最顶部必须定义:<!DOCTYPE html> (2)点击:下载 respond.js 文件 (3)引入<script src="respon ...

  7. 初学web开发——怎么解决无法找到路径的问题

    刚刚接触web开发一个月,在接手项目时,总会出项无法找到改路径的问题, 那么,这个是什么原因造成的呢?因为我现在使用的是MVC架构,大部分的原因是在View里创建了视图,但是并未在controller ...

  8. 移动端web开发——视口

    本篇主要是记录一下移动端视口的分类说明和其它的一些知识.在开始之前,先看一个典型的例子: <meta name="viewport" content="width= ...

  9. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

随机推荐

  1. vs中nodejs代码 resharper 提示 ECMAScript2015 Feature. your Current language level is ECMAScript5的解决办法

    问题如图 错误信息:ECMAScript 2015 Feature. your Current language level is: ECMAScript5 解决方法, 打开 Resharper -& ...

  2. 查看Oracle latch _spin_count默认值

    查看Oracle latch  _spin_count默认值 SELECT X.KSPPINM NAME, Y.KSPFTCTXVL VALUE, Y.KSPFTCTXDF ISDEFAULT FRO ...

  3. matplotlib绘制散点图

    参考自Matplotlib Python 画图教程 (莫烦Python)(10)_演讲•公开课_科技_bilibili_哔哩哔哩 https://www.bilibili.com/video/av16 ...

  4. Way to MongoDB

    1.MongoDB术语/概念:database,collection,document,field,indexSQL术语/概念:database,table,row,column,index 2.所有 ...

  5. spoj1811 LCS - Longest Common Substring

    地址:http://www.spoj.com/problems/LCS/ 题面: LCS - Longest Common Substring no tags  A string is finite ...

  6. 如何高效的遍历HashMap 以及对key 进行排序

    Map<Integer ,Object> map = new HashMap<Integer,Object>(); for(int i = 0; i<=100;i++){ ...

  7. Spring AOP 的实现方式(以日志管理为例)

    一.AOP的概念 AOP(Aspect Oriented Programming),是面向切面编程的技术.AOP基于IoC基础,是对OOP的有益补充,流行的AOP框架有Sping AOP.Aspect ...

  8. jvm3---垃圾回收器算法

    .1. GC算法 .1.1. 标记-清除算法(Mark-Sweep) 1.标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象 2.在标记完成后统一回收所有被标记的对象 缺点:一个是效率问题 ...

  9. HBuilder android 打包指南(V客学院技术分享)

    前提:确保配置文件(manifest.json)已配置完,没有异常. 打包选项如下: Android 包名 :在Android系统中是判断一个App的唯一标识,不同的App可以有同样的名字,但是它的包 ...

  10. 《Java入门第三季》第二章 认识 Java 中的字符串

    什么是 Java 中的字符串.1.在Java的世界里,字符串被作为String类型的对象处理. 2.通用的初始化的方式:String s = new String("i love you & ...