18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

运用@media screen完成网页页面合理布局的响应式

2021-02-11分享 "> 对不起,没有下一图集了!">
刚开始科学研究响应式web设计方案,CSS3 Media Queries是新手入门。
Media Queries,其功效便是容许加上表述式用于明确新闻媒体的自然环境状况,为此来运用不一样的款式表。也就是说,其容许大家不在更改內容的状况下,更改网页页面的合理布局以精准适应不一样的机器设备。
那麼,Media Queries是怎样工作中的?
二种方法:
一种是立即在link中分辨机器设备的规格,随后引入不一样的css文档:
 link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)" 
含意是当显示屏的总宽超过相当于400px的情况下,运用styleA.css
在media特性里:

 link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)" 
含意是当显示屏的总宽超过600低于800时,运用styleB.css
另外一种方法,就是立即写在 style 标识里:
@media screen and (max-width: 600px) { /*当显示屏规格低于600px时,运用下边的CSS款式*/
 .class {
 background: #ccc;
}

实际上大部分便是款式遮盖~,分辨机器设备,随后引入不一样的款式文档遮盖。
要留意的是因为网页页面会依据显示屏总宽调节合理布局,因此不可以应用肯定总宽的合理布局,都不能应用具备肯定总宽的原素。这一条十分关键,不然会出現横着翻转条。
填补:media query中的not only all等重要字
not: not是用于清除掉一些特殊的机器设备的,例如 @media not print(非复印机器设备)
only: 用于定某类非常的新闻媒体种类。针对适用Media Queries的移动终端来讲,假如存有only重要字,移动终端的Web访问器会忽视only重要字并立即依据后边的表述式运用款式文档。针对不兼容 Media Queries的机器设备但可以载入Media Type种类的Web访问器,碰到only重要字时候忽视这一款式文档。
all: 全部机器设备,这一应当常常见到
也有其他一些:

一个三栏合理布局的,不在同的规格下,变成两栏,再变成一栏

编码以下:
 !DOCTYPE HTML 
 html 
 head 
 meta charset="utf-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" / 
 title css3-media-queries-demo /title 
 style 
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
 padding: 0;
 margin: 0;
.content{
 zoom:1;
.content:after{
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden; 
.leftBox, .rightBox{
 float: left;
 width: 20%;
 height: 500px;
 margin: 5px;
 background: #ffccf7;
 display: inline;
 -webkit-transition: width 1s ease;
 -moz-transition: width 1s ease;
 -o-transition: width 1s ease;
 -ms-transition: width 2s ease;
 transition: width 1s ease;
.middleBox{
 float: left;
 width: 50%;
 height: 800px;
 margin: 5px;
 background: #b1fffc;
 display: inline;
 -webkit-transition: width 1s ease;
 -moz-transition: width 1s ease;
 -o-transition: width 1s ease;
 -ms-transition: width 1s ease;
 transition: width 1s ease;
.rightBox{
 background: #fffab1;
@media only screen and (min-width: 1024px){
 .content{
 width: 1000px;
 margin: auto
@media only screen and (min-width: 400px) and (max-width: 1024px){
 .rightBox{
 width: 0;
 .leftBox{ width: 30%}
 .middleBox{ width: 65%}
@media only screen and (max-width: 400px){
 .leftBox, .rightBox, .middleBox{ 
 width: 98%;
 height: 200px;
 /style 
 /head 
 body 
 div 
 div /div 
 div /div 
 div /div 
 /div 
 /body 
 /html 

响应式布局:@media screen 自适应网站:@media screen 网页页面模版 如今的网页页面访问媒体过多,不一样的服务平台有不一样的规格,如PC端、手机上端、iPad这些,规格相距过多,不应用自适应网站,就无法适配这种访问器。这儿,


本站內容假如沒有标明出處,全部权均归本网站,出示完全免费免费下载使用,但不可用以商业服务赢利。假如标明出處,则来源于于互连网,本网站不做商业服务主要用途。假如本网站有內容侵害到您的利益,请致函网站站长电子邮箱,本网站当马上删掉。

联络大家
"> 对不起,没有下一图集了!">
在线咨询