首先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. 浅谈.net MVC

    大学毕业对MVC的概念还不是很清晰,总觉得MVC是和三层一样的,是同一级别的架构.其实不然,三层架构是:BLL(业务逻辑层),DAL(数据库访问层),UI(页面显示层),而MVC仅仅是属于三层架构UI ...

  2. DateGridView 分页显示

    l 思路:将数据表整体填充至一个Dataset中,探后部分显示(DataaAdapter Fill重载) l DataGridView 控件   l BindingNavigator 控件   l B ...

  3. 关于键盘KeyDown事件

    if (e.KeyValue==13) //如果键盘的值等于13 这里面的13是enter键 textBox2.Focus(); //焦点就跑到textbox2上面

  4. 对datatable添加数据

    DataTable dt = new DataTable(); dt.Columns.Clear(); dt.Columns.Add("事故发生时间"); dt.Columns.A ...

  5. 第7天:javascript-DOM 获取标签、注册事件改变属性的值、innerText、改变属性的值等

    javascript WEB api------DOM document object model 案例 为元素注册点击事件,弹出对话框 <input type="button&quo ...

  6. 访问Django项目出现DisallowedHost at / Invalid HTTP_HOST header问题

    闲来无事,想玩玩django,源码安装碰到了一堆乱七八糟依赖性问题,耗费一下午的时间总算是在ubuntu14.04上搭建好了python3+django2开发环境, 心血来潮,创建了一个django项 ...

  7. K:线性表的实现—顺序表

    所谓顺序表,就是顺序存储的线性表.顺序存储就是用一组地址连续的存储单元依次存放线性表中各个数据元素的存储结构. 线性表中所有数据元素的类型是相同的,所以每一个数据元素在存储器中占用相同的大小的空间.假 ...

  8. 《CSS3揭秘》上(边框,投影,渐变,条纹效果,蚂蚁行军)

    最近看了<CSS3揭秘>一书,里面真的是干货满满呀,现将常用到的一些技巧归纳总结,便于日后用到查找.不得不感叹学无止境哦~ 1.边框与背景 半透明边框 .demo{ background- ...

  9. border-radius圆角兼容方案

    1.下载ie-css3.htc 2.CSS代码段 box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; ...

  10. html中的行内元素和块级元素小结

    一.首先我们总结下行内元素和块级元素有哪些: 行内元素: <a>标签可定义锚<abbr>表示一个缩写形式<acronym>定义只取首字母缩写<b>字体加 ...