html5匹配不同分辨率样式

.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 

@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */ 

@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 
时间: 2024-11-08 19:40:41

html5匹配不同分辨率样式的相关文章

[HTML5]手机屏幕分辨率和浏览器分辨率

在使用CSS3的中有如下类似代码 Html代码 @media screen and (max-width:480px){ -- } 意思是在最大宽度为480px的设备上应用{}里面的样式.这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率.比如苹果4的手机屏幕分辨率是960x640.而其自带的Safari浏览器的分辨率是320*480.我们可以通过如下代码检测所用的浏览器的分辨率: Js代码 $("#info").html("(您的浏览器的分辨率为:&qu

html5 中的 css样式单 的 两种调用方式的区别

在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有的样式单,推荐使用这种方式. 2.导入外部样式文件:此方式与第一种方式类似,但是需要用@import来引入外部样式单.由于某些浏览器(如 internet explorer)会在导入外部样式单时导致闪屏,所以不推荐用这种方式,而是尽量考虑使用第一种方式. 3.使用内部样式定义:这种方式是通过在htm

[js开源组件开发]html5标签audio的样式更改

html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以我简单的把它进行了封装,效果如下: 作为技术实现,它的原理比较简单,就是把原生的audio隐藏,然后用div来显示播放器的效果,然后调用它的click事件来触发play和stop,然后是时长duration,这个值有时能够获取,有时不行,比较坑,所以建议在audio标签上自定义duration属性存

HTML5音频选择播放样式

今天记录HTML5的音频播放样式,首先HTML5音频样式需要用到JS,这里我用了两种,这个代码之前老师也讲过,但是我这里记录的是自己的代码. 首先jquery-1.12.2.js是配置文件,但是MusicBox.js是自己手动添加的一个JS文件. 看HTML5的代码: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>音频

蓝鸥零基础学习HTML5第八讲 样式布局一

蓝鸥零基础学习HTML5第八讲 样式布局一 1.浮动到底是什么鬼 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*body { font-size:0px; }*/ div { width:100px; height:100px; text-align: center; line

蓝鸥零基础学习HTML5第八讲 样式布局二

蓝鸥零基础学习HTML5第八讲 样式布局二 1.定位的属性及特性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width:400px; height:400px; border:10px solid red; margin:0 auto; position: re

html5的三种样式

虽然最近一直在加班,但是对html5的学习还是不敢落下,html5的样式这节课听得比较仔细,我自己觉得也比较重要,样式也是html5中一个比较重要的点. 表示样式的标签有两个style和link,style用于样式的定义,link用于资源的引用,把一些外部的样式引用到html页面中.样式中的属性主要有rel.type.margin,用法如:rel="stylesheet"表示外部样式表,type="text/css"表示引入css文档,margin-left表示左边

HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

HTML5入门(CSS样式-------------------(CSS基础知识点----------------------------))

CSS继承性+层叠性+盒子+浮动 一.CSS继承性 eg:                 <style>                               div{                                      color: pink;                                      font-size: 30px;                                      width: 500px;