媒体查询下移动端配方案

//设置常用的body
html{
    font-size: 50px;
}
@no:15;
@media screen and (min-width:320px) {
  html{
      font-size: 320px/@no;
  }
}
@media screen and (min-width:360px){
    html{
        font-size: 360px/@no;
    }
}
/* iphone 678 */
@media screen and (min-width:375px) {
    html{
        font-size: 375px/@no;
    }
}
@media screen and (min-width:384px) {
    html{
        font-size: 384px/@no;
    }
}
@media screen and (min-width:400px) {
    html{
        font-size: 400px/@no;
    }
}
@media screen and (min-width:414px) {
    html{
        font-size: 414px/@no;
    }
}
@media screen and (min-width:424px) {
    html{
        font-size: 424px/@no;
    }
}
@media screen and (min-width:480px) {
    html{
        font-size: 480px/@no;
    }
}
@media screen and (min-width:540px) {
    html{
        font-size: 540px/@no;
    }
}
@media screen and (min-width:720px) {
    html{
        font-size: 720px/@no;
    }
}
@media screen and (min-width:750px) {
    html{
        font-size: 750px/@no;
    }
}

原文地址:https://www.cnblogs.com/xiaozhang666/p/11332015.html

时间: 2024-10-25 23:56:20

媒体查询下移动端配方案的相关文章

媒体查询ipad,pc端

媒体查询 /* 判断ipad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ #logo{ display: none; } } pc端 @media (min-width: 1024px){ #logo{ display: none; } 代码撸走,快去测试吧,阿西吧....

媒体查询(pc端,移动端不同布局)

媒体查询语法: 1.内联写法:and之后必须有空格@media screen and (min-width:960px //判断浏览器大小条件){body{background:red} //常规的样式} 2.外联写法:当满足屏幕满足条件的时候连接href后的css文件<link='stylesheet' media='screen and (min-width:960)' href='xx.css'/><link='stylesheet' media='screen and (min-

移动端1像素边框问题与CSS媒体查询

做移动端页面开发时,我们是按照UI设计图上的尺寸来做的. 比如说,UI给的图是750x1344(Iphone6标准),我们在浏览器做适配时,按照375x667来裁切,设计图上30像素的高度,开发时使用的是15px,这是因为Iphone6的设备像素比为2,css中的1px在设备中的像素为2px.当我们需要实现设计图中1px高度的边框时,在css中的1px实际上变成了2px边框,由此产生了1像素边框问题. 1.window.devicePixelRatio设备像素比 定义: window.devic

0082 rem适配方案:less+rem+媒体查询、flexible.js+rem

1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备. 2.使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化,元素尺寸也会发生变化,从而达到等比缩放的适配. 技术方案: 1.less+rem+媒体查询 2.flexible.js+rem 总结: 两种方案现在都存在,方案2 更简单,现阶段无需了解里面的js代码. rem实际开发适配方案1 ①假设设计稿是750px ②假设我们把整个屏幕划分为15等份(划分标准

bootstrap在ie8下,兼容媒体查询

最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效: 后来解决了,做如下记录: 1.必须运行在服务器下 2.hack 条件语法,如下: <!--[if lte ie 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> 这样

移动端zepot&amp;媒体查询media queries

使用zepot做轮播图<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>jd首页</title> <lin

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40      阅读:3961      评论:0      收藏:0      [点我收藏+] PC端 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.14.1寸.15寸; ) 1280*800(16:10  |15.4寸) 1280*1024(比例:5:4  | 14.1寸.15.0寸)

pc端响应式-媒体查询

媒体查询(@media):能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果 列举常用的pc屏幕宽度: 1024  1280  1366  1440  1680  1920  我们可在css样式中来写,也在不同屏幕下引入相应的样式. 1.css样式 假设我们在不同屏幕下要写基础字体的变化: @media screen and(min-width: 1024px){ body{font-size: 12px} } /*>=1024的设备屏幕*/ @media screen

手机端适配方案 媒体查询和flexbale

方法一  flexible 一.npm 包安装 lib-flexible 淘宝适配方案 px2rem px自动转rem npm install lib-flexible --save npm install px2rem-loader 二.在main.js中引入lib-flexible** import 'lib-flexible/flexible.js' 三.配置build/utils.jsvar px2remLoader = { loader: 'px2rem-loader', option