web前端——响应式设计

今天尝试着做了一个响应式的页面（看着有点丑！哈哈~）

看看效果吧：

说一下关于响应式用到的知识点：

1.viewport初始视图设置（vscode等部分编辑器会自动生成的）

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

（初始化宽度等于设备宽度，伸缩比例为1）

2.min-width,min-height,max-width,max-height流式宽度和高度使用

让页面元素分辨率改变时，使元素宽高在设置的范围内

3.media Queries的使用

有两种方式：

• 采用内部样式表

@media (max-width:557px) {

        设置在该分辨率下的元素样式

}

• 采用外部样式表

<link rel="stylesheet" media="screen and (max-width:557px)" href="css/mediaQueries/custom_small_iphone_media.css">
    <link rel="stylesheet" media="screen and (min-width:557px) and (max-width:980px)" href="css/mediaQueries/custom_small_ipad_media.css">
    <link rel="stylesheet" media="screen and (min-width:980px) and (max-width:1265px)" href="css/mediaQueries/custom_middle_media.css">

4.em和rem设置响应式字体大小（建议使用rem）

em是相对于父元素的字体大小（拥有不确定性）

rem只相对于html标签元素，默认和一般字体大小是一样的（16px=1em=1rem）

使用时，我们可以按比例设置不同设备的字体大小（比如：0.8rem）

5.移动设备优先原则

移动设备的分辨率需要优先考虑，防止页面布局不正常显示。（一般将最小分辨率设置放在最前面）