响应式网页设计基础

Posted 2020-09-03 Jacey

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;

  }