BootStrap 01

最新推荐文章于 2024-08-26 18:37:23 发布

big_lu

最新推荐文章于 2024-08-26 18:37:23 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/big_lu/article/details/83384547

本文深入探讨响应式网页设计的核心理念，强调流式布局、弹性布局及CSS3媒体查询技术的重要性，指导如何创建跨设备兼容的网页，解决不同屏幕尺寸下的布局难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap
五.Bootstrap
官网：https://getbootstrap.com/
中文官网：https://bootcss.com/
1.响应式布局
　1.什么是响应式网页
Responsive web page:响应式网页，可以根据浏览器设备的不同（pc/pad/phone）而自动的更改布局，图片文字效果，不会影响用户的浏览体验。
2.响应式网页必须做到
1.布局：不能固定宽度，必须是流式布局
2.文字和图片大小随着容大小而改变
3.使用媒体查询
响应式网页存在的问题：代码的复杂大大提升，适用于内容不太多的页面。

3.如何测试响应式网页
	  1.方式1：使用真实设备测试
		  好处：测试效果真实可靠
			不足：测试任务量较大
  2.使用第三方模拟测试软件
		  好处：无需添置太多真实设备，方便测试
			不足：测试效果有限，有待进一步测试
  3.使用Chrome等浏览器自带模拟设备
		  好处：简单方便
			不足：测试效果有限，需要进一步测试
	4.如何编写响应式网页
	  1.声明元标签（viewport-手机适配）
		  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			viewport元标签:
			  早期3G手机为了浏览大尺寸的网页，只能强行把网页缩小，导致文字，图片等变小。
				ios提出了"视口"，视口用于盛放网页内容，超过部分，滑动显示。android也借用了此概念。
      width=device-width 表示视口的宽度就是设备的宽度
				initial-scale=1.0 表示视口是否缩放，1.0不缩放
				maximum-scale=1.0 允许用户缩放的最大倍率
				minimum-scale=1.0 允许用户缩放的最小倍率
				user-scalable=0 是否允许用户手动缩放，取值yes/no/1/0
  2.所有的容器/文本/图片 使用相对尺寸不使用绝对尺寸
		  ex:
			  div{
				 /* width:1000px;*/绝对值

					width:100%;//相对值

				/*font-size:24px;*/ 绝对值
					font-size:1rem; 相对值
				}
  3.流式布局+弹性布局
		  实现方法：float+flex
  4.使用CSS3媒体查询技术---这是响应式布局必须条件
		  Media:媒体，指的是浏览网页的设备,如screen(pc/pad/phone),tv(电视)，print(打印机)
			Medai Query：媒体查询，可以自动根据当前设备类型的不同，或者特性（方向，尺寸，解析度）不同，有选择器的执行部分的css样式，忽略其他部分。
    媒体查询的两种使用方法：
			  (1)根据媒体查询结果使用不同的外部css文件
				<meta name="viewport" content="width=device-width,initial-scale=1.0" >
				<link media="screen and (min-width:992px)" rel="stylesheet" href="pc.css">
				<link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="pad.css">
				<link media="screen and (max-width:767px)" rel="stylesheet" href="phone.css">