@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 ...
随机推荐
- [转]linux shell 流程控制(条件if,循环【for,while】,选择【case】语句实例
原文链接:http://www.cnblogs.com/chengmo/archive/2010/10/14/1851434.html linux shell有一套自己的流程控制语句,其中包括条件语句 ...
- SDWebImage浅析
第一部分 SDWebImage库的作用: 通过对UIImageView的类别扩展来实现异步加载替换图片的工作. 主要用到的对象: 1)UIImageView(WebCache)类别,入口封装,实现读取 ...
- python——异常
一.什么是异常 1.错误 从软件方面来说,错误是语法或是逻辑上的.错误是语法或是逻辑上的. 语法错误指示软件的结构上有错误,导致不能被解释器解释或编译器无法编译.这些些错误必须在程序执行前纠正. 当程 ...
- IMX6Q RTC驱动分析
对于在工作中学习驱动的,讲究的是先使用,再理解.好吧,我们来看看板子里是如何注册的? 在板文件里,它的注册函数是这样的: imx6q_add_imx_snvs_rtc() 好吧,让我们追踪下去: 1 ...
- Django ORM --- 建表、查询、删除基础
1.什么是ORM ORM的全称是Object Relational Mapping,即对象关系映射.它的实现思想就是将关系数据库中表的数据映射成为对象,以对象的形式展现,这样开发人员就可以把对数据库的 ...
- Shell编程之Expect自动化交互程序
一.Expect自动化交互程序 1.spawn命令 通过spawn执行一个命令或程序,之后所有的Expect操作都会在这个执行过的命令或程序进程中进行,包括自动交互功能. 语法: spawn [ 选项 ...
- VMware 连接不上XSHELL
本人创建虚拟机时把网络连接模式选成了桥接,后来在VMware虚拟网络编辑器中查看了连接模式:NAT. 重新回到VMware中更改了连接模式:NAT模式 成功连接XSHELL 步骤1 打开VMware的 ...
- Go 语言defer用法
defer延迟调用: 1.确保调用在函数结束时发生: 2.defer列表为先进后出: 3.通常在Open/Close Lock/Unlock中使用. defer调用顺序示例: package mai ...
- Centos7.4 Nginx反向代理+负载均衡配置
Ningx是一款高性能的HTTP和反向代理服务器,配置起来也比较简单. 测试环境: 172.16.65.190 Nginx-反向代理 172.16.65.191 Ningx-Web 172.16.65 ...
- 关于v4l2的一点变更
先打个连接 http://linuxtv.org/downloads/presentations/media_ws_2013/v4l2-multi-format.pdf 2013年linux 多媒体构 ...