2017-12-19今天是响应式,基本学完了,今天还做了一个页面……

原创 moxiao 随笔 个人笔记 287阅读 2017-12-19 23:35:27 举报

今天讲了响应式,到目前为止,HTML和css就基本讲完了,马上下周就会学JS了。
有点激动啊!转眼就差不多两个月了,时间还者的是快啊!
来看下今天的知识点:
什么是响应式?
10年左右,歪果仁(外国人)提出概念。
【一套代码】能够在【多终端】上以【最优雅】的方式进行展示。

哪些设备(媒体)支持响应式
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备(PC、手机、平板、...)
speech ‘听觉’类似的媒体类型
tty 不适用像素的设备
tv 电视(非黑白电视)

/ 媒体查询条件 /
@media print{
/ 符合条件后执行的CSS代码 /
.box{
background-color: palegreen;
}
}

min-width 分辨率宽度大于等于设置值的时候识别
max-width 分辨率宽度小于等于设置值的时候识别
orientation:portrait 竖屏
orientation:landscape 横屏
-webkit-min-device-pixel-ratio:2 像素比
横竖屏判断
宽高比判断横竖屏

and 和、与 (连接媒体特性)
not 排除指定媒体类型
only 指定某种特定的媒体类型
很多时候是用来对那些【不支持媒体特性】但却【支持媒体类型】的设备
/ 媒体查询条件 /
@media only all and (max-width: 700px){
/ 符合条件后执行的CSS代码 /
.box{
background-color: palegreen;
}
}

外联样式表 link[media="all and (min-width:600px)"]

写在link标签上,符合条件时,该样式表(整个)才执行
风险:范围太大

@import @import url(index.css) all and (min-width:600px)
必须要放在样式表最前边

@media all and (min-width:1200px){
//大分辨率(PC分辨率、TV)
}
@media all and (min-width:850px) and (max-width:1199px){
//中等分辨率(PC小分辨率 || pad)
}
@media all and (min-width:700px) and (max-width:849px){
//pad设备
}
@media all and (min-width:480px) and (max-width:699px){
//高分辨率手机设备 || 低分辨率平板
}
@media all and (max-width:479px){
//手机设备
}

今天做了个页面,也不能说是做了一整个,只是以前布好的色块,今天把里面的内容给全部写上去了。
html 代码

因为是要用这做响应式的,所以尺寸会大一点,明天做了响应式,会在发一次。

努力每一天,充实每一天,就爱由于!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复