导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
热门文章
1推文
没想到《孤独摇滚》的第二季消息来的如此突然。不过第二季的监督换了,不知道还能不能延续第一季的水平。
热度
546
2推文
今日份的秋叶原,久违的夜景,以及明明禁止live却依然和love live联动的atre🤣。
热度
467
3页面
程序员老黄历&求签
热度
286
4博文
探访《蜡笔小新》老家——春日部游记
热度
273
5推文
看完《孤独摇滚》的总集篇剧场版后篇了。 虽然删减在所难免,但是个人觉得制作组还是在尽量在保留精华。 ED歌曲《Re:Re:》把我惊艳到了,非常熟悉的旋律当时硬是想不起来,回到家查了一下原来第一次听到是在《只有我不在的街道》。 https://www.bilibili.com/video/BV1M5ejeMErR
热度
156
6推文
怎么回事?刚公布了《孤独摇滚》的第二季的消息,第二天就又又又公布了《某科学的超电磁炮》第四季的消息!
热度
142
7博文
《孤独摇滚》圣地巡礼——下北泽&下北泽咖喱节2023
热度
130
8博文
3DS模拟器简体中文字库 | Citra3ds字库 | 符文工房4乱码解决字库 | shared_font.bin
热度
130
9推文
2025年2月15日,天气晴,今天去电影院看了《前辈是男孩子 雨过天晴》。 这明明可以做成TV版第二季动画,但是P9不知为何突然选择了做成剧场版,当时看到这个消息我是震惊的。结果不出所料,用的是TV版的制作水准做的剧场版动画。分辨率略低,我坐在最后一排都觉得有些糊。突然的手绘Q版的表现手法也和TV版几乎一致。 不过细腻的心理描绘,出色的氛围营造,也算是一定程度掩盖了制作上的贫穷。 总的来说剧情的满足度还是很不错的。有欢快的剧情,也有感人的桥段。不过更多的是感受到了主角们的成长,青春是真的美好! 另外此次的首周特典是贴纸和漫画小册子。漫画小册子的内容是情人节的小短片,蛮有意思的。
热度
117
10推文
今天去看了首部初音未来的电影《剧场版 世界计划 破碎的世界与无法歌唱的未来》。 说是初音未来的电影,但其实是手游《世界计划》的剧场版。好像有挺多人看到是初音未来的电影就去看了,结果发现并不全是😅。其实在宣传海报中,初音未来后面的那些人才是主角。 不过,我也是那些没玩过手游的观众之一。其实整场看下来问题也不是很大,就是对于人物关系和世界观的设定可能会有些问题。电影其实也很贴心地在剧情开头,大致以剧情的形式展示了手游中的五个团体的人物及其性格,但感觉还是有些杯水车薪,约等于看个眼熟。 此次的电影是第一次购买应援场。所谓的应援场,就是能在电影院里像是听演唱会一样挥舞荧光棒和尽情呐喊。看着前排那些粉丝看到自己喜欢角色时的呐喊,以及演唱会环节的打CALL,应援场确实是很有意思的一种电影观看方式呢! 剧情方面,属于看了开头大概能猜到整部动画的剧情走向。不过,通过演唱会的气氛渲染,甚至还感受到了一丝丝的感动。 总体来说,对于手游的粉丝来说可能是嘉年华般的狂喜,对于没接触过手游的路人来说也能一定程度融入其中,属于一部不错的粉丝向电影(不管是手游粉丝还是初音未来粉丝)。 首周电影特典是CD和游戏内的兑换码。送CD这种形式还第一次遇到,官方大气!
热度
91
最新评论
广树管理员
2025-02-17 08:56
@石樱灯笼:那就静观结果吧
石樱灯笼
2025-02-16 23:13
@广树:除了Yoppi的演出之外,这动画最核心的东西就是这个演出,这玩意换一个人很可能就天塌。芙莉莲那边也是一样。
广树管理员
2025-02-16 19:17
@石樱灯笼:太悲观了呀 大佬
石樱灯笼
2025-02-16 19:00
灵魂没了,够呛
广树管理员
2025-02-16 17:21
@小彦:一直都这么多人呀,不要小看东京的商业街。
正在攻略

logo_kai.jpg


PSN奖杯卡

PSN奖杯卡

赞助商广告

【响应式布局】响应式布局基础之媒体查询

作者:广树时间:2016-12-01 11:38:53分类:CSS/HTML

在以前的WEB概念中人们的第一反应往往是用“PC来看”,但是随着智能手机和平板的普及,用户的浏览环境逐渐倾向PC以外的终端。“响应式WEB”也因此受到了关注。

这次将简单说一下关于响应式布局中的媒体查询。


所谓的媒体查询?

媒体查询是从CSS2时代开始,以media标签发展而来的CSS3新元素。
类似下面的代码应该是大家都看过的。


<link rel="stylesheet" href="css/style.css" media="screen">
上面的代码是以通常显示器为对象,加载“style.css”。
也就是说,用户使用什么终端=用什么媒体来访问这么一回事。
比如想从大显示器转变为小显示器的时候,如果只能判断媒体(无法判断条件分支),仅凭CSS是什么都做不了的。

为了解决这一问题,扩张出了能够判断媒体特性的媒体查询诞生了。


主要的媒体类型

screen(一般的显示器)、projection(已废弃。 用于投影设备)、print(用于打印机和打印预览)、tv(已废弃。 用于电视和网络电视)、all(用于所有设备)等
参考:http://www.runoob.com/cssref/css3-pr-mediaquery.html

媒体查询的书写方式

媒体查询主要通过以下两种方法来实现。


通过link元素来指定

和以前的css文件读取方法没什么差异,实际代码如下。


<head>
<link rel="stylesheet" href="style.css" media="screen and (max-width:480px)">
/**
 中略
**/
</head>
media=” ”的地方,在screen后面还写了什么。
这里就是媒体查询。其意思是“画面宽度小于480px加载style.css”
也就是说,超过指定数值(例子中为宽480px)则不加载该css的意思。
但是如果不在这个范围内不加载任何css的话也不是很科学。


所以一般媒体查询会写多个代码。


<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">/* 画面宽度小于或等于480px,加载这个文件。*/
<link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> /* 画面宽度480px~1024px区间内加载这个文件 */
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">/* 画面大于或等于1024px,加载这个文件 */
如上述代码,可以通过指定分歧点来适用不同的css文件。
这个分歧点被称之为“断点”。
虽然断点可以设置非常多,但是设置的越多越难维护,现在一般的网站主要区分智能手机、平板、PC这几大类终端。


通过样式表来指定的方式


和前面通过断点加载不同样式表不同,这个方法是直接写在CSS样式表文件中。


/*
@media以外的地方为所有尺寸适用。
*/
p {
 color:red;
}
@media screen and (min-width:480px) { 
    /* 画面宽度大于等于480px,读取这里的样式 */
p { color:#ededed;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /* 画面宽度从768px到1024px读取这里的样式 */
p {}
}
@media screen and (min-width:1024px) {
    /* 画面尺寸大于1024px读取这里的样式 */
 
}


以下代码是区分iPhone、iPad、PC的基本断点。
想挑战响应式布局的话可以用来当作参考。

/* iPhone 竖屏 */
 
@media screen and (min-width:480px) { 
    /* for iPhone Landscape (iPhone 横) */
 
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /* for iPad  */
 
}
@media screen and (min-width:1024px) {
    /* for PC */
 
}
媒体查询可以指定的属性


前面主要介绍的是以窗口宽度为参数进行切换,除了这以外还有许多方法,这里例举常用的。

根据终端朝向判断

//竖屏的情况下
@media screen and (orientation:portrait){
  p {font-size: 1em; }  
}
//横屏的情况下
@media screen and (orientation:landscape){
  p {font-size: 1.2em; }  
}
根据设备的朝向可以使用“orientation”。
portrait为竖屏,landscape为横屏。可以通过朝向改变CSS。


根据像素密度判断


/* 视网膜屏的情况下适用 */
@media screen and (-webkit-min-device-pixel-ratio:2){
  p {font-size: 1.2em; }  
}
这个方法是比较老旧的方法,是可以通过设备的像素密度来判断。
现在比较常用的如下。



@media screen and (min-resolution: 2dppx)
或者



@media screen and (min-resolution: 2dppx)
指定设备的像素密度。分辨率可以用dp或dpcm来表示。






#响应式布局

donate.png

1210 x 50(蓝底).png

cloudcone