zoukankan      html  css  js  c++  java
  • 第三十三节-初级响应式和初级移动端布局(最基本)

    一.响应式布局:pc端用响应式布局较多

    监测宽度变化给出不一样的网页布局

        1.媒体查询

                          三种常用的媒体:all(所有媒体)

                                                      screen(彩屏设备,手机 电脑)

                                                      print(打印设备)

         查询关键词: not   only    and(and两边要有空格)

         媒体特性:min-500px   表示网页宽度大于500px时

                          max-500px  表示网页宽度小于500px时

                          orientation:portrait 竖屏,网页高度大于等于宽度时

                          orientation:landscape 横屏 网页宽度大于高度

       1 练习使用时用法: <style>

                                            eg:@media all and (min-500px) and (max-800px){

                                                                 div{

                                                                        color:red;

                                                                    }

                                                            }

                                     </style>

                                          eg2:@media all and (orientation:portrait){

                       div{

                                                                        color:red;

                                                                    }

                                                            }

                                     </style>

        ♥2.实战布局时用法:(真正使用还需配合js)

          外部css:  @charset "utf-8"

                          div{

                                 color:red;

                              }

         内部:<style>{

        }</style>

        <link rel="stylesheet" href="01.css"  media="all and (max-500px)>

        ♥3.移动端响应

         1.盒子(宽 高) 字体 border   一切带px的都要变成rem值。 rem是html里的字体font-size

            根据设备宽度改变来改变rem:用js

                        

           设计.盒子(宽 高) 字体 border 等用rem:

                         .    盒子(宽 高) 字体 border 的rem用原先的px/字体大小即可

                                 

                  

     

                                 

     

  • 相关阅读:
    Educational Codeforces Round 81 (Rated for Div. 2)(训练)
    Prime Path(POJ) 3126
    前端知识(一)04 Vue.js入门-谷粒学院
    前端知识(一)03 初识 ECMAScript 6-谷粒学院
    前端知识(一)02 初识 Node.js-谷粒学院
    前端知识(一)01 前端开发和前端开发工具-谷粒学院
    同步和异步、阻塞和非阻塞
    给HTML页面设置自己的icon
    解决MyBatis-Plus 3.3.1中自动生成代码tinyint(1)无法自动转换为Boolean 的办法
    驼峰命名和短横线命名的转换
  • 原文地址:https://www.cnblogs.com/yzdwd/p/12192263.html
Copyright © 2011-2022 走看看