首页 > 代码库 > 响应式网页设计基础
响应式网页设计基础
http://wf.uisdc.com/cn/getting-started/your-first-multi-screen-site/responsive.html
添加一个视窗:
视窗的配置只会出现在head标签当中,并且只需要声明一次。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
使用元视口值 width=device-width 控制页面适应不同分辨率的屏幕宽度。无论是手机的小屏幕或桌面显示器,页面将会根据不同的屏幕尺寸重新对内容进行排版。
一些浏览器在用户旋转为横向浏览的时候仅仅是保持页面宽度不变并缩放网页内容而不是对屏幕内容进行重新排版。加入属性
initial-scale=1
使页面无论在什么情况下都将CSS像素与屏幕像素的比例保持在1:1,并允许页面优先采用全尺寸屏幕宽度。initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。
相关文章:https://www.w3schools.com/css/css_rwd_viewport.asp
https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag
background-size: cover; // 使该元素会在保持原比例上自由拉伸。
设置断点
设备查询技术(Media Queries)
@media (min-width: 600px) {
}
在我们的产品页面当中,看起来我们需要做:
- 限制最大宽度。
- 修改元素的内边距以及缩小字码。
- 使表格与标题内容浮动对齐。
- 使视频始终浮动在内容周围。
- 缩小图片大小并且让他们出现在更好的格局里面。
这个容器会包含一个简单的 div 在下面的表格当中:
<div class="container">...</div>
.container {
margin: auto;
max-width: 800px;
}
响应式网页设计基础
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。