精华内容
下载资源
问答
  • 功能简介:自媒体查询、rem布局、响应式布局技术,是三个不同的技术。...响应式布局 它是在页面宽度改变时,整个页面或者页面中的局部随着页面的缩放进行响应并实时变化(响应式布局和自媒体查询有...

    功能简介:

    自媒体查询、rem布局、响应式布局技术,是三个不同的技术。 自媒体查询 常用在适配不同的设备显示场景下,根据屏幕大小显示不同页面,但功能大致不变的这么一个技术。rem布局 它是一个长度单位,这个长度单位是根据‘根元素’的字体大小的单位确定的(根元素字体大小 = 1rem)。响应式布局 它是在页面宽度改变时,整个页面或者页面中的局部随着页面的缩放进行响应并实时变化(响应式布局和自媒体查询有区别)。在如今复杂的开发中这几个技术越来越密不可分,在项目中可以通过实际需求进行搭配。

    自媒体查询:

    功能:自媒体查询主要是设置不同的设备屏幕下的显示样式。

    获取浏览器或设备宽度:

    min-device-width (设备的宽度)\   min-width  (浏览器的宽度)   (注释:也可以获取高度,就是将width改写成height)

    方法:公共部分:

    内部样式引用(可以编写多组):

    1、

    2、 外部样式引用(可以引用多个外部样式表):

    1、

    flex弹性布局:

    功能:

    就是使用flex对页面进行布局,也可以是响应式的。

    方法:   一下方法为flex常用方法,具体学习可以点击链接  flex布局作用在父元素的方法:

    flex-direction:  设置主轴方向

    flex-wrap:  是否让子元素换行

    justify-content:设置主轴对齐方式

    align-items:  设置交叉轴的对齐方式

    作用在子元素的方法(简写):

    flex:参数一(数字)、参数二

    (数字)

    、参数三(px / %)

    参数一:子元素平分多余父元素的空间。     参数二:子元素按比例压缩超出父元素的宽度。      参数三:设置该元素的宽。

    ab4bc43f9957

    rem的使用方法

    概念:指相对跟元素的字体大小的单位。(补充:rem于em的区别一个是以根元素字体大小为参考,em是以父级元素为参考)

    使用方法:

    一般使用媒体查询+rem或js,在不同宽度的窗口下自动调节字体大小。手动设定:

        1rem = 18pxjs方式自适应:

    const c = ()=>{

    let w = document.documentElement.clientWidth; // 获取设备的宽度

    let n = (20*(w/320)>40?40+'px':(20*(w/320)+'px')) //20为参数  320设备宽度  40显示最大字号

    document.documentElement.style.fontSize = n        // 设置根字体大小

    }

    window.addEventListener('load',c)     //初始值

    window.addEventListener('resize',c)     //屏幕改变的是的值

    自适应布局

    布局特点:不同设备对应不同的HTML或者局部自适应。(不同的设备不同的页面)js实现方法:

    const redireat = ()=>{

    let userAgent = nevigator.userAgent.toLowerCase()   //获取设备信息

    let device = /ipad|iphone|midp|rv:1.2.3.4|ucwed|android|windows ce|windows mobile/   //适配不同设备

    if(derice.test(userAgent)){

    window.location.href = 'move.html'  //跳转移动端页面

    }else{

    window.location.href='pc.html'   //跳转PC端页面

    }

    }

    redireat()

    响应式布局

    布局特点:确保一个页面在所有终端上,都能显示出令人满意的效果。(一套方案,处处运行。)

    设计思路:使用自媒体查询及用 % 或 rem 作为单位,对不同视口设备进行编写样式。

    rem弹性布局

    布局特点:为了保证在各种屏幕上得不失真,就要根据实际屏幕宽度做等比换算。(一套方案,是不同尺寸、分辨率的视口呈现出较好的效果。)

    设计思路:使用自媒体查询及用 % 或 rem 作为单位,对不同视口设备进行编写样式。

    总结:

    在项目开发中,根据项目的实际情况选择不同的技术的搭配,这样才能实现业务的效果。

    展开全文
  • 静态布局、流式布局、自适应布局、弹性布局响应式布局 前端的布局主要有: 静态布局、流式布局、自适应布局、弹性布局响应式布局等。 一、静态布局: 尺寸上一律使用px;同时限制外层容器的大小;中间的宽度有...

    静态布局、流式布局、自适应布局、弹性布局、响应式布局

    前端的布局主要有:
    静态布局、流式布局、自适应布局、弹性布局、响应式布局等。

    一、静态布局:

    尺寸上一律使用px;同时限制外层容器的大小;中间的宽度有最大(max-width)最小(min-width)限制,如果屏幕宽度大于max-width,那就两边自适应,如果屏幕宽度小于min-width,那就会出现x轴方向的滚动条。

    优点:不存在浏览器兼容的问题。

    缺点:pc端和移动端不好共用一套代码。需要做两套一套pc一套移动端。

    应用场景:主要是在pc端使用。如:百度pc门户页面。

    二、流式布局:

    流式布局又称为百分比布局。随着屏幕的变化,页面的布局没有发生大的变化,进行适配调整,如栅栏,各模块之间使用了百分比。可以理解为静态布局的升级版,流式布局 = 静态布局 + 百分比布局;

    优点:元素的宽高用百分比做单位,元素宽高随分辨率调整,布局变化不大。

    缺点:屏幕尺度跨度过大的情况下,px部分不变化,百分比部分变化大,会显得页面展示非常不协调。

    应用场景:左侧固定+右侧自适应、左右固定宽度+中间自适应,也主要用在pc端。

    三、自适应布局:

    通过@media媒体查询,设置不同分辨率下设置对应的样式,可以理解为500~800是一种样式的展示,800~1000又是一种样式的展示,1000~1200又是一种样式设置。

    优点:可以在已知的范围内实现对应屏幕的自适应。

    缺点:对于未知的宽度不能自适应。

    应用场景:pc和移动都可以使用

    四、弹性布局(flex):

    css3引入的布局方式

    优点:方便、简单

    缺点:存在兼容性问题。

    应用:对于pc端的整体布局应用的不多,适合用在pc布局的局部,主要是用在移动端整体布局。

    五、响应式布局:

    响应式布局 = 自适应布局 + 流式布局 ;主流的做法是通过js计算根节点的rem来实现在不同屏幕下实现响应式布局,可以理解为自适应布局的精细版本。是目前最优秀的布局。

    优点:适配pc和移动端,

    缺点:对于一些屏幕情况需要特殊的处理。

    总结

    其他的布局相比与以上布局要么是换了名字,要么是大同小异。

    展开全文
  • 前端css弹性布局响应式布局,多列布局 主页 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0px; ...

    前端css弹性布局,响应式布局,多列布局

    主页

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{
    				margin: 0px;
    				padding: 0px;
    			}
    				
    			body{
    				background-color: aliceblue;
    			}
    			.shou
    			{
    				margin-top: 0px;
    				background-color: blue;
    				display: flex;
    			}
    			.shou>div{
    				flex:1;
    				text-align: center;
    				background:skyblue;
    				line-height: 100px;
    			}
    			@media screen and (max-width: 1000px){
    				.shou{
    					flex-direction: column;
    				}
    			}
    			.shou>div>a{
    				width:100%;
    				height: 100%;
    				text-decoration: none;
    				color: black;
    				font-size: 20px;
    				display: block;
    			}
    			.shou>div:hover{
    				background:lightblue;
    			}
    			.body{
    			    display: flex;
    			}
    			.body>div{
    				float:left;
    				width: 500px;
    				height: 570px;
    				background-color: white;
    				text-align: center;
    				margin-left: auto;
    	            margin-right:auto;
    			}
    			.body>.left>ul>li{
    				list-style: none;
    				float:left;
    			}
    			.body>.left>ul>li>img{
    				width:166px;
    			}
    				
    			.body>.right>video{
    				width:100%;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="shou">
    			<div><a href="首页.html">首页</a></div>
    			<div><a href="文字.html">文字</a></div>
    			<div><a href="图形.html">图形</a></div>
    			<div><a href="视频音频.html">视频音频</a></div>
    		</div>
    		<div class="body">
    			<div class="left">
    				<h1>最新商品</h1>
    		        <ul>
    					<li><img src="./img/1.png" alt=""></li>
    		            <li><img src="./img/1.png" alt=""></li>
    		            <li><img src="./img/1.png" alt=""></li>
    		            <li><img src="./img/1.png" alt=""></li>
    		            <li><img src="./img/1.png" alt=""></li>
    		            <li><img src="./img/1.png" alt=""></li>
    		            <li><img src="./img/1.png" alt=""></li>
    		            <li><img src="./img/1.png" alt=""></li>
    					<li><img src="./img/1.png" alt=""></li>
    				</ul>
    			</div>
    			<div class="right">
    				<h1>商品介绍</h1>
    				<video src="./img/m1.mp4" controls autoplay muted loop="loop"></video>
    				<p>这是你的第一台小米折叠屏手机</p>
    				<p>是首个小米智能工厂独立研发制造的手机</p>
                    <p>是首个使用澎湃C1专业影像芯片的手机</p>
                    <p>这就是 MIX FOLD</p>
    			</div>
    		</div>
    	</body>
    </html>
    

    音频视频

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{
    				margin: 0px;
    				padding: 0px;
    			}
    				
    			body{
    				background-color: aliceblue;
    			}
    			.shou
    			{
    				margin-top: 0px;
    				background-color: blue;
    				display: flex;
    			}
    			.shou>div{
    				flex:1;
    				text-align: center;
    				background:skyblue;
    				line-height: 100px;
    			}
    			@media screen and (max-width: 1000px){
    				.shou{
    					flex-direction: column;
    				}
    			}
    			.shou>div>a{
    				width:100%;
    				height: 100%;
    				text-decoration: none;
    				color: black;
    				font-size: 20px;
    				display: block;
    			}
    			.shou>div:hover{
    				background:lightblue;
    			}
    			.main{
    			    display: flex;
    				justify-content: space-around;
    				margin-top: 100px;
    			}
    			.main>div{
    				width: 1000px;
    				height: 550px;
    				background-color: white;
    				text-align: center;
    				border-radius: 10px;
    			}
    			.main>div>audio{
    				width: 300px;
    				height: 50px;
    			}
    			.main>div>video{
    				width: 100%;
    				margin-top: 15px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="shou">
    			<div><a href="首页.html">首页</a></div>
    			<div><a href="文字.html">文字</a></div>
    			<div><a href="图形.html">图形</a></div>
    			<div><a href="视频音频.html">视频音频</a></div>
    		</div>
    		<div class="main">
    			<div>
    				<audio src="./img/稻香-周杰伦-440613.mp3" controls="controls"></audio>
    				<video src="img/m1.mp4" autoplay="autoplay" loop="loop"></video>
    		    </div>
    		</div>
    	</body>
    </html>
    
    
    
    
    

    图形

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{
    				margin: 0px;
    				padding: 0px;
    			}
    				
    			body{
    				background-color: aliceblue;
    			}
    			.shou
    			{
    				margin-top: 0px;
    				background-color: blue;
    				display: flex;
    			}
    			.shou>div{
    				flex:1;
    				text-align: center;
    				background:skyblue;
    				line-height: 100px;
    			}
    			@media screen and (max-width: 1000px){
    				.shou{
    					flex-direction: column;
    				}
    			}
    			.shou>div>a{
    				width:100%;
    				height: 100%;
    				text-decoration: none;
    				color: black;
    				font-size: 20px;
    				display: block;
    			}
    			.shou>div:hover{
    				background:lightblue;
    			}
    			.main>.one{
    				width: 200px;
    				height: 200px;
    				background:red;
    				margin: 100px auto;
    				text-align: center;
    				line-height: 200px;
    				color: white;
    			}
    			.main>.one:hover{
    				border-radius: 100px;
    				transition: 1s;
    			}
    			.main>.two{
    				width: 200px;
    				height: 200px;
    				background:blue;
                    margin: 0 auto;
    				text-align: center;
    				line-height: 200px;
    				color: white;
    			}
    			.main>.two:hover{
    				transform: rotate(360deg); 
    				transition: 1s;
    				width: 100px;
    				height: 100px;
    				line-height: 100px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="shou">
    			<div><a href="首页.html">首页</a></div>
    			<div><a href="文字.html">文字</a></div>
    			<div><a href="图形.html">图形</a></div>
    			<div><a href="视频音频.html">视频音频</a></div>
    		</div>
    		<div class="main">
    			<div class="one">移鼠标进来</div>
    			<div class="two">移鼠标进来</div>
    		</div>
    	</body>
    </html>
    
    

    文字

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{
    				margin: 0px;
    				padding: 0px;
    			}
    				
    			body{
    				background-color: aliceblue;
    			}
    			.shou
    			{
    				margin-top: 0px;
    				background-color: blue;
    				display: flex;
    			}
    			.shou>div{
    				flex:1;
    				text-align: center;
    				background:skyblue;
    				line-height: 100px;
    			}
    			@media screen and (max-width: 1000px){
    				.shou{
    					flex-direction: column;
    				}
    			}
    			.shou>div>a{
    				width:100%;
    				height: 100%;
    				text-decoration: none;
    				color: black;
    				font-size: 20px;
    				display: block;
    			}
    			.shou>div:hover{
    				background:lightblue;
    			}
    			.main{
    			    display: flex;
    			}
    			.main>p{
    				column-count: 3;
    				margin: 10px 100px;
    				column-rule:darkblue outset 10px;
    			}
    			.main2{
    				display: flex;
    				justify-content: space-around;
    				margin-top: 100px;
    			}
    			.main2>img{
    				width: 500px;
    				align-items: center;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="shou">
    			<div><a href="首页.html">首页</a></div>
    			<div><a href="文字.html">文字</a></div>
    			<div><a href="图形.html">图形</a></div>
    			<div><a href="视频音频.html">视频音频</a></div>
    		</div>
    		<div class="main">
    			<p>内屏:8.01″ 2K+折叠屏,外屏:6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,
    			首发澎湃C1自研专业影像芯片,高通骁龙™888,WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,
    			大屏高效交互,隐私保护,内屏:8.01″ 2K+折叠屏,外屏:6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,
    			首发澎湃C1自研专业影像芯片,高通骁龙™888,WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,大屏高效交互,隐私保护,
    			内屏:8.01″ 2K+折叠屏,外屏:6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,首发澎湃C1自研专业影像芯片,
    			高通骁龙™888,WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,大屏高效交互,隐私保护,内屏:8.01″ 2K+折叠屏,
    			外屏:6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,首发澎湃C1自研专业影像芯片,高通骁龙™888,
    			WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,大屏高效交互,隐私保护
    			</p>
    			
    		</div>
    		<div class="main2">
    			<img src="./img/lei.jpg" alt="">
    		</div>
    	</body>
    </html>
    
    
    展开全文
  • 转载 静态布局、自适应布局、流式布局、响应式布局弹性布局等的概念和区别
    展开全文
  • 响应式布局(根据页面的窗口大小展示不同的布局样式) 媒体查询 screen代表的窗口的意思 and 是一个固定语法()内的内容时限制条件 min-width:不小于的意思 max-width:不大于的意思 width:等于的意思 #弹性布局
  • 静态布局(Static Layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)...
  • 2)响应式布局和自适应布局的区别(面试问题) 响应式布局只开发一套代码,通过检测视口的分辨率,针对不客户端在客户端做代码处理,来展现不同的布局内容; 自适应需要开发多套界面,通过检测视口的分辨率,来...
  • CSS3弹性布局(伸缩布局,flex布局) flex是flexible box的缩写,意思为“弹性布局”,用来为盒子模型提供最大的灵活度,能够最大限度的解决我们关于浮动的问题 采用flex布局的父元素元素,称之为flex容器(context),...
  • CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局。同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间。自己写了一个弹性盒子的demo:主要HTML代码:1234CSS代码...
  • 一、静态布局(Static Layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度...
  • 1.浮动+百分比布局 floa:left /right ...*在屏幕浏览器窗口大小发生改变时也可以灵活的调整布局 *控制元素在页面的布局方向 *按照不同于文档对象模型(DOM)所指定的排序方式对屏幕上的元素重新排序 语...
  • 页面各种布局概念与区别静态布局(Static Layout)流式布局(Liquid Layout)自适应布局(Adaptive Layout)响应式布局(Responsive Layout)弹性布局(rem/em布局)总结 静态布局(Static Layout) 即传统Web设计,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,057
精华内容 4,822
关键字:

弹性布局和响应式布局的区别