移动端的适配

<head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta http-equiv="X-UA-compatible" content="IE=edge">    <title>最新试卷</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta content="telephone=no" name="format-detection" />    <meta content="email=no" name="format-detection" />    <meta name="apple-mobile-web-app-status-bar-style" content="black" />    <meta name="apple-mobile-web-app-capable" content="yes" />    <link href="../static/css/common.css" rel="stylesheet" type="text/css">    <link href="css/index.css" rel="stylesheet" type="text/css">    <script src="../static/js/flexible_css.js"></script>    <script src="../static/js/flexible.js"></script></head>

2. 布局

i. 基本布局：rem

将视觉稿中的px单位转换成rem单位 ：

html元素尺寸 =  视觉稿px值 / rem基准值

例如：视觉稿宽度750px，则html中的缩放倍率就是750 / 10 = 75，然后以这个为基准值，如果视觉稿中某块小内容宽度是150px，则html中这块内容宽度就是 150 / 75 = 2rem

时间： 2024-10-12 19:51:05

移动端的适配的相关文章

聊聊PC端页面适配

目也pc端有适配的需求:目前我们pc项目的设计稿尺寸是宽度1920,高度最小是1080. 适配目标: 1.在不同分辨率的电脑上,网页可以正常显示 2.放大或者缩小屏幕,网页可以正常显示 对于宽度的适配 对于宽度适配: 首先设置html,body{width:100%;overflow-x:hidden;} 然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都会小于1200px),对于背景层,我们一般都要求完全铺开,主要有以下几种情况: 1.背景色为纯色:我们可以直接

移动端页面适配，rem布局

移动端页面适配 em 根据元素自身的字体大小来计算自己的尺寸 rem root em 根据根节点(html)的字体大小来计算自己的尺寸 适配: 各个移动设备,分辨率大小不一致,使我们的页面在各种分辨率下都显示完好(等比的缩放); 根据屏幕的分辨率 动态的设置html的字体大小,来达到页面等比缩放的功能 注意:保证html最终算出来的字体大小 不能小于 12 在最开始先设置一段js代码,获得屏幕宽度,这段js优先于任何css和js <script> (function() { var html

移动端开发适配总结

移动端开发适配2种方案总结 针对移动端适配的方案~ 一: 第一种方案是:所有的单位使用rem来适配:首先在页面上设置html的font-size的大小:如下我项目中的设置: html { font-size: 100px; } @media(min-width: 320px) { html { font-size: 100px; } } @media(min-width: 360px) { html { font-size: 112.5px; } } @media(min-width: 400p

移动端界面适配

本文引自:http://www.cnblogs.com/xianyulaodi/p/5533201.html 摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型, 在大屏幕手机上看起来会有点偏小.比如iphone6PLUS.如果是做成适配的话,就很好的解决了这个问题,大屏幕显示的内容大一点,小屏幕显示的小一点. 所以今天做一个移动端页面适配的小小总结 适配的要求 1.在不同分辨率的手机上,页

移动端web适配屏幕方案总结

基础知识点 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. iPhone5的物理像素是640X1136. PS:在普通屏幕下,1个css像素对应1个物理像素(1:1).        在超高像素密度屏幕(Retina显示屏)下,1个css像素对应4个物理像素(1:4).(这里指专指苹果超高清屏幕)        因此,在移动端方面就需要设置dpr来保证超高清屏显示图片不会失真. 逻辑像素( logical p

移动端屏幕适配原理以及方法讲解

序言: 今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题.作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了.可是今天我又在思考这个问题了,因为下周我有个关于移动端适配的演讲.人生这么短暂,我却把有限的时间奉献到了无限的前端道路上. 根据我不(cong)太(ming)灵(jue)活(ding)的大脑的努力思考.我发现现阶段比较流行移动端适配原理只有一个--就是对元素进行放大和缩小,具体到执行的时候方法有两个(求不打脸). 1个是网页大

移动端font-size适配方案(续)

概述 之前写过一篇移动端font-size适配方案,但是在实践过程中,还是发现当时的思维太局限了,视野太窄了,所以现在补充更新一下,记录下来,供以后开发时参考,相信对其他人也有用. 我上一篇博文主要有2个误区,下面我一一记下来. 这篇博文参考了移动端适配方案(下). 适配方案 有多种适配方案: 百分比布局:固定高度,宽度自适应.就是固定高度,宽度用百分比.可以想象,对于不同的屏幕,所有的东西都有横向拉伸,导致非常不好看. px布局:固定宽度,viewport缩放.就是全部用px,然后用js控制i

移动端的适配方案

目录 移动端的适配方案 百分比适配 viewport缩放适配 DPR缩放适配 rem适配 hotcss适配(使用dpr+rem,简单好用) vw/vh适配(为适配而生,最优方案) 移动端的适配方案 不同的尺寸的手机设备上,页面相对合理的展示(自适应)或者保持统一效果的等比缩放 百分比适配 根据父级计算百分比,需要配合其他布局使用 <div class="container"> <div></div> <div></div> &

PC端、移动端页面适配方案

前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 本文记录在java后端进行PC端.移动端页面适配的方案 工程结构 想要实现后端统一适配,首先要规范好工程结构 后端代码,跟之前差不多,响应的viewName路径,直接从业务模块开始,适配工作交给aop:两套页面,对应的业务模块,分别放在两个目录下面 aop适配器 统一的适配工作交由aop环绕切面进

移动端页面适配

前端开发中,尤其移动端手机屏幕大小各异,该如何解决页面适配的问题呢?下面从几点进行了总结. 1.设计稿的布局设计 我们在进行H5页面内容规划布局设计的时候,不能把重要的内容放在太偏下的位置或者偏上,否则前端布局时可能出现内容显示不全的情况. 除去将浏览器全屏显示的情况,几乎所有的情况都会有顶部的状态栏和导航栏. iphone的设计标准,状态栏和导航栏的独立像素高度分别为40px和88px. 由于安卓系统可以更改状态栏和导航栏的高度,这里可以取默认值为48px和100px. 那么就会把网页内容往下