68. CSS3 Responsive设计之不同设备的分辨率设置
目录
下面我们一起来看看 CSS3 Meida Queries 在标准设备上的运用,大家可以把这些样式加到你的样式文件中,或者单独创建一个名为“responsive.css”文件,并在相应的条件中写上你的样式,让他适合你的设计需求:
1024px 显屏
@media screen and (max-width : 1024px) { /* 样式写在这里 */ }
800px 显屏
@media screen and (max-width : 800px) { /* 样式写在这里 */ }
640px 显屏
@media screen and (max-width : 640px) { /* 样式写在这*/ }
iPad 横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ }
iPad 竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ }
iPhone和Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ }
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 68. CSS3 Responsive设计之不同设备的分辨率设置
码云笔记 » 68. CSS3 Responsive设计之不同设备的分辨率设置