css3 media 回应式合理布局的简易案例

日期:2021-01-20 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

回应式合理布局能够为不一样终端设备的客户出示更为舒服的页面和更好的客户体验,并且伴随着现阶段大显示屏挪动机器设备的普及,用"必然趋势"来描述也不为过。伴随着愈来愈多的设计方案师选用这个技术性,大家不但看到许多的自主创新,还看到了1些成形的方式。伴随着技术性的发展趋势css3的特点也被普遍运用起来,它的许多新标识也十分功能强大并且十分非常容易学习培训,就像css3的回应式合理布局也是是非非常6的,本来只能在pc端显示信息的网页页面如今能够根据@media的添加便可以把1个网页页面变为回应式了,pc端还可以挪动端还可以简直伸缩轻松啊,比如呢

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF⑻">  
  5.         <title></title>  
  6.     </head>  
  7.     <style>  
  8. /*    小于200px*/   
  9.         @media only screen and (max-width:200px ) {   
  10.             #p{   
  11.                 background: red;   
  12.             }   
  13.         }   
  14. /*    超过300px*/   
  15.         @media only screen and (min-width:300px ) {   
  16.             #p{   
  17.                 background: yellow;   
  18.             }   
  19.         }   
  20.            
  21.     </style>  
  22.     <body>  
  23.         <p id="p">小于200px情况变鲜红色超过300px情况为黄色</p>  
  24.     </body>  
  25. </html>  

编码的实际效果

@media能够用于一条件还可以用于双标准比如:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF⑻">  
  5.         <title></title>  
  6.     </head>  
  7.     <style>  
  8. /*    小于200px*/   
  9.         @media (min-width:200px ) and (max-width:500px ) {   
  10.             #p{   
  11.                 background: red;   
  12.             }   
  13.         }   
  14.     </style>  
  15.     <body>  
  16.         <p id="p">200px以上而且500px下列情况变为鲜红色</p>  
  17.     </body>  
  18. </html>  

这段编码小于200px或超过500px无法显示实际效果

简易的1个@media就完成了回应式网页页面,是否十分easy,

自身随意做的1个网页页面这是在450px以上的网页页面实际效果

这是450px下列的网页页面实际效果

整体做法便是将每块div回应式缩到450px下列的情况下每一个div的宽度为100%

高宽比为auto,我在写这个网页页面的情况下遇到1个小小的的难题,保证网页页面底部的情况下底部导航栏飞了,它沒有安安分守己分的落在底部而是在正中间,我在这里共享1下小小的的专业知识点那便是我最终的处理方式,只必须给底部的div1个style款式  clear:both这样底部就会安安分守己分的固定不动到下面了,在media里还会有横屏和竖屏的回应式,竖屏为@media(orientation:portrait)

竖屏为@media(orientation:landscape)这样便可以兼容横屏和竖屏了,media的优点十分依赖注入如大家在建立自身的简历的情况下能够运用回应式合理布局这样大家的机遇岂并不是大了许多,HR也是有将会会在手机上上看到你的简历这个情况下机遇将会就偷偷的来到你的身旁呢

以上这篇css3 media 回应式合理布局的简易案例便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

上一篇:微营销推广文章内容散播的5大细节 返回下一篇:没有了