博主信息
博文 31
粉丝 0
评论 0
访问量 21088
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
媒体查询,固定定位,flex属性
木子木杉
原创
703人浏览过

媒体查询

PC优先

  1. @media screen and (min-width: 750px) {
  2. html {
  3. font-size: 16px;
  4. }
  5. }
  6. @media screen and (min-width: 375px) and (max-width: 749px) {
  7. html {
  8. font-size: 14px;
  9. }
  10. }
  11. @media screen and (max-width: 374px) {
  12. html {
  13. font-size: 12px;
  14. }
  15. }

固定定位

登录页面

  1. <form action="" class="modal-form">
  2. <fieldset>
  3. <legend>用户登录</legend>
  4. <input type="email" name="emil" placeholder="username@email.com" />
  5. <input type="password" name="password" placeholder="******" />
  6. <button>登录</button>
  7. </fieldset>
  8. </form>

固定位置

  1. .modal .modal-form {
  2. position: fixed;
  3. top: 10em;
  4. left: 20em;
  5. right: 20em;
  6. }

flex 属性

1.flex-flow:主轴方向,不换行/换行

  1. flex-flow: row nowrap;
  2. flex-flow: row wrap;

2.place-content:项目在主轴上的排列与空间分配

  1. place-content: start;
  2. place-content: end;
  3. place-content: center;
  4. place-content: space-between;
  5. place-content: space-around;
  6. place-content: space-evenly;

3.place-item:项目在交叉轴上的对齐方式

  1. place-items: stretch;
  2. place-items: start;
  3. place-items: end;
  4. place-items: center;

4.flex:放大因子 收缩因子 计算宽度

  1. flex:auto;
  2. flex:1 1 auto;
  3. flex:0 1 auto;
  4. flex:0 0 auto;

5.order越小越靠前

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学