首页 > Web开发 > 详细

响应式网站设计基础

时间:2019-11-17 00:24:07      阅读:85      评论:0      收藏:0      [点我收藏+]

响应式网站指的是随着设备的尺寸变化,网页内容和样式始终可以正常显示。

1. 元视窗代码

<meta name="viewport" content="width=device-width,initial-scale=1">

设置了元视窗的代码后,页面内容可以随设备适度缩放。

2. CSS媒体类型过滤

css媒体类型过滤是根据当前所在的媒体环境进行过滤。

媒体类型有:

all 所有媒体设备;默认值
print 打印机
handheld 小的手持设备
projection 幻灯片
screen 电脑显示器
tv 电视类型的设别
tty 电传打字机等

1. link加载外联样式时

//默认media="all" 所有的设备;默认阻塞渲染
<link href="../css/index.css" rel="stylesheet"> 
// 媒体类型为print,只在用于打印机时,使用该样式阻塞渲染;其他情况不阻塞
<link href="../css/1.css" rel="stylesheet" media="print"> 

2. 加载具体样式内容时

@media print {
    p.test { font-family:verdana,sans-serif;font-size:14px;}
}
@media screen {
    p.test {font-family:times,serif;font-size:10px;}
}
@media print,screen {
    p.test {font-weight: bold}
}

3. CSS媒体查询过滤

媒体查询条件有:

技术分享图片

1. link外联样式时

// 0-640px
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
// >640px
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
// 高度>宽度
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
// 宽度>高度
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

2. 加载具体样式时

// 500px-600px
@media (min-width: 400px) and (max-width: 600px) {
    .desc:after {
        content:" In fact, it‘s between 500px and 600px wide.";
      }
}

应用

比如,为保证页面展示效果良好,当页面<500px时,文字全屏展示(100%);

当页面大于500px,也只中间500px用来展示内容;两侧都是空白填充。

4. 使用相对单位

1. 使用百分比

2.使用相对单位rem/em

 

响应式网站设计基础

原文:https://www.cnblogs.com/lyraLee/p/11874620.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!