@media screen页面自适应尺寸!!
@media screen and (max-width:360px){body,input,select{font-size:38%}}
@media screen and (min-width:360px){body,input,select{font-size:15.75px}}
@media screen and (min-width:400px){body,input,select{font-size:17.5px}}
@media screen and (min-width:480px){body,input,select{font-size:21px}}
@media screen and (min-width:560px){body,input,select{font-size:24.5px}}
@media screen and (min-width:600px){body,input,select{font-size:26.25px}}
@media screen and (min-width:640px){body,input,select{font-size:62.5%}}
HTML头部引用实现自适应屏幕:
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0, user-scalable=no" />
CSS头部引用实现判断屏幕自适应:
最终更新后(推荐):
body{font-family:"微软雅黑";color:#000;font-size:62.5%;margin:0 auto; }
@media screen and (min-width:480px) and (max-width:639px){body{font-size:50%;}}
@media screen and (max-width:479px){body{font-size:40%;}}
一下个人理解:
max-width{宽度的最大值==小于当前宽度}
min-width{宽度的最小值==大于当前宽度}
@media screen页面自适应尺寸!!的更多相关文章
- 解决@media screen (自适应)IE浏览器不兼容问题
1.解决兼容性问题 (1)页面最顶部必须定义:<!DOCTYPE html> (2)点击:下载 respond.js 文件 (3)引入<script src="respon ...
- 使用CSS3 @media 设置页面自适应
参考CSS3 @media 查询 如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { bo ...
- 手机端@media screen布局自适应
@media only screen and (min-width: 310px) and (max-width: 360px) { }@media only screen and (min-widt ...
- @media screen媒体查询实现页面自适应布局
@media screen and (min-width:1200px){ //大于等于1200px才会进入 } @media screen and (max-width:375px) { //小 ...
- [转载]利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- 利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- html自适应布局,@media screen,媒体查询
html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta chars ...
- 利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...
- 实现网页布局的自适应 利用@media screen
利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-widt ...
随机推荐
- HDF及HDF-EOS数据格式简介
HDF-EOS数据格式介绍 HDF(Hierarchy Data Format )数据格式是美国伊利诺伊大学国家超级计算应用中心(NCSA ,National Central for Super co ...
- Linux下运行java项目
最近初步接触了linux,感觉很有新鲜感.之前在windows下干过的事情也便想到在linux环境下实现一下.正好手头在编java,就想既然java可以在windows的DOS操作下运行,是不是也可以 ...
- first application
<!DOCTYPE html> <html> <head> <title>Create a Map</title> <meta htt ...
- Linux Shell基础 Bash常见命令 echo命令
概述 shell中常见的命令echo. 输出命令:echo echo命令的输出内容如果没有特殊含义,则将原内容输出到屏幕:如果输出内容有特殊含义,则输出打印其含义. 命令格式如下: [root@loc ...
- Java技术路线
1.计算机基础: 1.1数据机构基础: 主要学习: 1.向量,链表,栈,队列和堆,词典.熟悉 2.树,二叉搜索树.熟悉 3.图,有向图,无向图,基本概念 4.二叉搜索A,B,C类熟练,9大排序熟悉. ...
- ETL应用:使用Pro*C实现文件抽取的方法
/******************************************* ***** 函数功能 : ***** 抽取数据库记录 ***** ********************** ...
- Eclipse Class Decompiler——Java反编译插件
http://www.blogjava.net/cnfree/archive/2012/10/30/390457.html Eclipse Class Decompiler是一款Eclipse插件,整 ...
- 0530JavaScript基础2
常用内置对象 所谓内置对象就是ECMAScript提供出来的一些对象,我们知道对象都是有相应的属性和方法 数组Array(部分相当于列表) 1.数组的创建方式 var colors = ['red', ...
- Docker容器技术-命令进阶
一.基本命令 1.Docker布尔型选项 使用某选项但没有提供参数,等同于把选项设置为true,要改变它的值,唯一的方法是将其设置成false. 找出一个选项的默认值是true还是false: [ro ...
- nodejs异步调用async
犹豫nodejs是异步编程模型,有一些在同步编程中很容易做到的事情,现在却变得很麻烦,async的流程控制就是为了简化这些操作var async = require('async'); 1.serie ...