zoukankan      html  css  js  c++  java
  • html 之前学习响应式的笔记

    响应式的设计,根据用户设备的不同,用户屏幕大小不同,提供不同的网页设计
    http://mediaqueri.es/
    PhoneGap 使用
    2,如何模拟手机设备
    chome 浏览器 在32以上
    设备检测
    用 device.js
    device.ipad(),device.mobile,
    device.portrait(), 检测设备是竖直的
    device. 检测设备是水平的
    device.iphone 检测设备是否是苹果手机
    device.android() 检测设备是否是安卓手机
    device.tablet() 检测设备是否是大手机(7寸以上)
    实现跳转:window.location = "";

    检测屏幕宽度,更换样式表

    javascript 得到页面宽度
    document.documentElement.clientWidth;
    window.onrsize  window事件



    window.onresize = gaibian;
    视口, 就是屏幕宽度,查找苹果手机的宽度的时候,宽度居然是980;
    视口让我们学习响应式很不方便,

    width = device.width  命令视口的宽度
    initial-scale = 1.0 命令视口默认的
    mini


    css3中的媒体查询,
    media ="(min-600px;)"  简称 媒体查询
    min-width  小于等于
    max-width  大于等于


    流式布局 就是利用父盒子的百分比

    如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐]

    如果您想转载本博客,请注明出处

    如果您对本文有意见或者建议,欢迎留言

    感谢您的阅读,请关注我的后续博客

  • 相关阅读:
    定时器
    Vue CLI环境变量
    负数的二进制表示方法
    IDEA指定启动JDK版本
    Windows7安装两个jdk配置
    Bloom Filter 数据结构去重
    新浪微博爬虫参考
    Spring Data JPA
    Spring的JDBC框架
    数据库连接池:Druid
  • 原文地址:https://www.cnblogs.com/geek12/p/4052751.html
Copyright © 2011-2022 走看看