@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页面自适应尺寸!!的更多相关文章

  1. 解决@media screen (自适应)IE浏览器不兼容问题

    1.解决兼容性问题 (1)页面最顶部必须定义:<!DOCTYPE html> (2)点击:下载 respond.js 文件 (3)引入<script src="respon ...

  2. 使用CSS3 @media 设置页面自适应

    参考CSS3 @media 查询 如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { bo ...

  3. 手机端@media screen布局自适应

    @media only screen and (min-width: 310px) and (max-width: 360px) { }@media only screen and (min-widt ...

  4. @media screen媒体查询实现页面自适应布局

    @media screen and (min-width:1200px){ //大于等于1200px才会进入 }   @media screen and (max-width:375px) { //小 ...

  5. [转载]利用@media screen实现网页布局的自适应,@media screen and

    开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...

  6. 利用@media screen实现网页布局的自适应,@media screen and

    开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...

  7. html自适应布局,@media screen,媒体查询

    html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta chars ...

  8. 利用@media screen实现网页布局的自适应

    利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

  9. 实现网页布局的自适应 利用@media screen

    利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-widt ...

随机推荐

  1. 返回泛型集合的SqlDBHelper

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using Entity; ...

  2. form 表单<input type="button" value="登录" onclick="loginSubmit ()"/> 点击提示 Uncaught TypeError: loginSubmit is not a function

    在网上搜了一堆东东,仔细看了一下,再加上实验,发现原因出在<form>中. <form method="post"> <button type=&qu ...

  3. OJ 1101 谁是中间的那个

    前言:主要考察排序用法 sort(cow+1,cow+1+n,cmp);//数组按cmp方法排序 Description 一天,农夫乔伊像往常一样来到了他的牧场,他突然对他的奶牛产奶量产生了兴趣.他想 ...

  4. eclipse连接SqlServer2008(被它搞得惨兮兮)

    建民大叔告诉我要考试做一个系统要求连接SqlServer2008,于是我便开始了“炼狱”,人家连接起来一路绿灯,我却一路红灯所以决定把它记录下来,给后来人提供方便. 第一个红灯: 启动服务后利用cmd ...

  5. Linux软件包管理 RMP包

    RPM 包的安装虽然很方便和快捷,但是依赖性实在是很麻烦,尤其是库文件依赖,还要去 rpmfind 网站査找库文件到底属于哪个 RPM 包,从而导致 RPM 包的安装非常烦琐.那么,有没有可以自动解决 ...

  6. Android开发BUG及解决方法2

    错误描述: 错误分析: 程序依赖的两个包冲突 解决方法: 在build.gradle文件中android节点下加packagingOptions节点

  7. Linux挂载Windows共享目录

    在windows中设置共享目录并添加权限用户 把Window系统的文件共享挂载到linux centos 目录下的方法步骤: 1.先在windows下面共享需要挂载的目录. 2.确保linux与win ...

  8. windows简单使用etcd

    一.下载安装选择版本 https://github.com/coreos/etcd/releases 二.解压 三.首先开启etcd 1.进入在etcd解压的目录中 2.etcd.exe 没有erro ...

  9. (ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY)讲解

    说明:Statement stmt = con.createStatemen=(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY ...

  10. Luogu-4774 [NOI2018]屠龙勇士

    这题好像只要会用set/平衡树以及裸的\(Excrt\)就能A啊...然而当时我虽然看出是\(Excrt\)却并不会...今天又学了一遍\(Excrt\),趁机把这个坑给填了吧 现预处理一下,找出每条 ...