首先html head之间加入:
<meta
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport">
 
需要写两个样式
@media(max-width:669px){//当屏幕最大669时,执行下面css
.navigation-top{
display: none;
}
}
 
@media(min-width:669px){//当屏幕最小669时,执行下面
.phone-top{
display: none;
}
}
 
js:
//屏幕尺寸改变时触发
 window.onresize = function(){

}

屏幕分辨率的高:window.screen.height

屏幕分辨率的宽:window.screen.width

css根据屏幕大小切换样式的更多相关文章

  1. CSS 屏幕大小自适应

    要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法:  @medi ...

  2. html 网页背景图片根据屏幕大小CSS自动缩放

    https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...

  3. js 根据屏幕大小调用不同的css文件

    原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...

  4. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  5. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  6. 移动设备应用程序中支持多个屏幕大小和 DPI 值

    支持多个屏幕大小和 DPI 值的指导原则 要部署独立于平台的应用程序,应了解不同的输出设备.设备可以具有不同的屏幕大小或分辨率以及不同的 DPI 值或密度. Flex 工程师 Jason SJ 在他的 ...

  7. 关于web页自动适配屏幕大小

    一.先了解下html5的viewport使用 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的 ...

  8. CSS文字,文本常用样式

    CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...

  9. 利用JavaScript来切换样式表

    切换样式表 html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. 激活 IntelliJ IDEA

    1.点击下面的链接下载 JetbrainsIdesCrack-4.2-release.jar 链接:https://pan.baidu.com/s/1eNY_bwxF7Efl4QG0yh6l1A  提 ...

  2. CentOS 7重装mysql8.0.15

    查看是否安装有mysql rpm -qa | grep mysql 有的话先删除干净 下载MySQL yum源 wget https://dev.mysql.com/get/mysql80-commu ...

  3. Jenkins2.138配置slave节点时,启动方法只有两个选项

    Jenkins2.138配置slave节点时,启动方法只有两个选项,并没有通过javaweb代理启动这个选项 解决办法 全局安全配置->代理->选择随机选取

  4. Working C# code for MySql5.5 Stored Procedures IN parameters

    MySQL5.5存储过程: #插入一条 涂聚文 DELIMITER $$ DROP PROCEDURE IF EXISTS `geovindu`.`proc_Insert_BookKindList` ...

  5. 理解position:relative

    前言:position有5个属性:static.absolute.relative.fixed和inherit.本篇博客主要介绍relative属性,因为似乎很多人对这个属性的理解很模糊,而且不清楚r ...

  6. javascript变量的引用类型值

    JavaScript变量可以用来保存俩种类型的值:基本类型和引用类型值 前言 JS变量可以用来保存两种类型的值:基本类型值和引用类型值.基本类型的值源自一下5种基本数据类型:Underfined.Nu ...

  7. drupal7 profile2模块获取个人信息

    一.问题背景: 用profile2模块,扩展个人信息,增加了“手机号”等信息,一些地方想要获取当前用户的手机号 二.解决办法: 用profile2自带的方法:profile2_load_by_user ...

  8. drupal 通过hook_menu实现添加菜单

    $items['mypayment/onlinepay']=array( 'title' => '在线充值', 'description' => '在线充值', 'page callbac ...

  9. Unable to update index for central http://repo1.maven.org/maven2/ 解决方法

    不知道什么原因 MyEclipse(eclipse) 中的 maven 插件突然不能用了,修改 pom.xml 无任何反应 控制台报 Unable to update index for centra ...

  10. Spring mvc与Struts2的比较

    1. 机制:spring mvc的入口是servlet,而struts2是filter,这样就导致了二者的机制不同. 2. 性能:spring会稍微比struts快.spring mvc是基于方法的设 ...