移动端页面：viewport与分辨率的坑

移动端页面按手机屏幕分辨率自动缩放的js

使用viewport中的vm来适配移动端页面

前言作为一个小前端,经常要和H5打交道,这就面临着不同终端的适配问题. Flexible方案通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值,给我更贴切的体会就是通过js脚本根据设备的dpr和设计图的宽度来计算出html的font-size值,然后就运用rem单位开发可以等比例缩放的H5页面. 但是!Flexible已经完成了他自身的历史使命,我们可以放下Flexible,拥抱新的变化. 做到适配要解决的问题在移动端布局,我们需要面对两个最为重要的问题:…

html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够. 今天就研究一下各大互联网公司对于移动端页面的处理方式. 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp 主要研究点:viewport的设置,字体的设置,图片原始宽高…

PC端页面转换成手机端页面的分辨率问题的理解

PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上通常是 750px -> 100vw / 750px = 1.333333 rem 是转换了多大纸面积就展示多少相对的模式 , 因此, 不但能使 a3 以a4模式设计不出问题,还能让 a3 设计出的东西, 在任何a4 模式下的样子比例不变. vw - 1vw = 1%视口宽度设计图的宽度是 750像素 1125像素视口的宽度是 100vw…

移动端页面使用单位的问题：关于px、百分比、em、rem开发中逐渐转换的问题记录

开始写前端页面也有了快两年时间,从一开始的懵逼到现在的淡定,但是不能改变我还是一只小菜鸟的事实,平时遇到的一些问题都会记录在文件夹里,现在都整理一下大家一起分享自己平时也翻翻看看~ 不知道大家平时写的时候是用的什么,但是我一般用的是这几个:px,百分比,em,rem 一.首先咱先了解下这几个都是啥,有啥区别: px:就是像素,相对于屏幕分辨率而言的,简单来说就是平时我们写静态页面时用px作单位,但是在firefox/chrome会发现我们的布局发生了变化: 百分比:这比较适合块状的页面设计,但是…

轻松使用px为单位开发移动端页面

研究移动端页面已经有许久了,一直执着于rem来开发,不谈性能怎么样,单从工作效率上看影响了不少,首先要固定设计稿的宽度,一般都是固定在640px,然后在根据根目录的字体大小来计算出每个元素的rem的值,无疑在开发中切图,每个元素都要去计算一边,是不是感觉很麻烦,有没有一种方法,像切PC端页面一样,切了直接写css,不用去计算这么麻烦,答案是肯定有的!好吧,先给大家看一下,我以前用rem来开发的技术文章吧! 好了,废话不多说,进入今天的正题,轻松使用px开发移动端页面!就在前天浏览微信的“天天酷跑…

移动端页面开发适配 rem布局原理

主题 HTML移动端页面开发适配 rem布局原理什么是适配,为什么要适配我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适口不同,所以为了让我们的页面在每个设备上都可以良好的展示,那么就需要为这些设备做统一的处理,这个过程就称为移动端适配. 需要知道的一些概念: 物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元,可以理解为我们平时说的分辨率: 设备独立像素(density-…

浅谈移动端三大viewport

我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 可能我们只知道这三个字段的含义(视口宽度等于设备宽度,屏幕缩放为1,禁止用户缩放),但是为什么要这么写,其原理又是什么呢? 我们先看一个简单的demo吧. <!doctype html> <html la…

html5--项目实战-仿天猫（移动端页面）

html5--项目实战-仿天猫(移动端页面) 总结: 1.标准搜索栏的做法:这里是弹性布局,放大镜和小话筒是background img 2.手机尾部导航做法:这是一个个 li 标签,每个li标签占%25 3.手机尾部导航固定方法:相对定位外加距离底部为0 position: fixed; bottom: 0; 4.标题栏做法:浮动布局,一部分左浮动,一部分右浮动 5.背景渐变效果:效果很好 background-image: linear-gradient(to bottom,#B0C4DE,…

pc端页面在移动端显示问题

1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name="viewport" content="width=1220"> 2.如果不想让页面有水平滚动条又有元素需要固定在屏幕底部,则可以按以下方法操作 1)给html页面设置视口宽度 2)判断是否为移动设备,对pc和移动设备分别设置样式,如下: $(function(…

HTML5新结构标签和移动端页面布局

--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.article 一篇文章 4.section 文章中的章节 5.aside 侧边栏 6.footer 页面底部.页脚 pc端兼容需要引用对应的js脚本<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/…

移动端页面 css reset

这个是通用的 css reset.这个版本适用于移动端页面如果需要在 PC端使用,可以修改 html{font-size: 10px;}为html{font-size: 12px;} 其他地方不需要修改 ========================================= @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blo…

【移动端 Web】怎么循序渐进地开发一个移动端页面

1. 移动页面开发基础 1.1 像素——什么是像素像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,Web 前端开发领域,像素有以下两层含义: (1) 设备像素:设备屏幕的物理像素,对于任何设备来讲物理像素的数量是固定的. (2) CSS像素:这是一个抽象的概念,它是为 Web 开发者创建的. 如下图,是在缩放比例为1,即 scale = 1 的情况下,设备像素和CSS像素示意图: 我们再来考虑这样…

PC端页面同比例缩放

html5--2.10综合实例2-移动端页面练习

html5--2.10综合实例2-移动端页面练习学习要点通过一个简单的移动手机页面,复习学过的内容手机网页的测试手机布局的屏幕设定手机网页的测试方法直接在手机上测试,比较麻烦,效果好电脑上下载手机模拟器利用浏览器自带的功能 name="viewport":屏幕设定 maximum-scale=1.0,minimum-scale=1.0:initial-scale=1.0:最大最小缩放比例为1:其实就是不允许点击缩放 user-scalable=0,width=devic…

移动端使用mint-ui组件loadmore填坑

链接地址为 https://mint-ui.github.io/docs/#/en2/loadmore ,这里需要注意引入的方式,我这里是用cdn的方式引入的.请结合官方API阅读本文章. 2.在vue中注册对应组件loadmore 具体代码位置如下(也可使用全局注册) 123456789101112 new Vue({ el:'#app', data:{ //... }, methods:{ //... }, components:{ loadmore }}) 3.在view结构中写标…

vue3.x移动端页面基于vue-router的路由切换动画

移动端页面切换一般都具有动画,我们既然要做混合开发,做完之后还是不能看起来就像一个网页,所以我们基于vue-router扩展了一个页面切换push和pop的动画.这是一篇比较硬核的帖子,作者花了不少精力来写先上效果图再贴核心代码 router文件夹下,新建transition-extend.js文件,实现如下: /** * router扩展,页面切换动画 */ // 负责SessionStorage存储路由历史. const SessionStorage_key_Router_Extend_…

CSS5:移动端页面(响应式)

CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做只有一些新闻站点和博客站点用响应式,因为布局简单,响应式足够 1.媒体查询 media query 媒体:电脑,纸张,都是媒体含义:如果媒体满足0到800 之间,那么会应用这里面的样式 <style> @media (max-width: 800px){/*如果媒体满足0到800 之间,那么会应用这里面的样式*/…

weinre- 调试移动端页面

相信很多前端的小伙伴一定会遇到一个问题, 比如我编写完一个页面,某个地方需要进行调整细节或者是哪个地方怎么调整都不对,在pc端还好,有google,firefox之类可以调节页面的工具,虽说这些工具有模拟手机的页面的功能,但是毕竟真机上调试与浏览器上调试还是有挺大差别的,那有人会问了,有没一款可以针对移动端调试的工具呢,答案是肯定的. weinre 就能比较好的解决这个问题的,下面我们就来了解下怎么用 weinre调试移动端页面吧一:远程调式工具-weinre Weinre是什么? Wei…

nginx-1.7.9快速启动连接手机测移动端页面

大家好,本人之前用nginx熟熟的,后来一段时间不用,当今天再次想使用的时候,发现,悲催的是,竟然忘记怎么用了!噢噢,于是乎,就从网上搜索怎样让nginx和移动端页面联系在一起测试. 可惜的是,我搜索了很多篇文章,都不对路~焦急,惶恐,悲催~所有的心情策马奔腾哇啦哇啦啦~~ 后来经过联系之前同事,各种测试,终于启动成功啦啦啦~~ 好了,开始说步骤了,大家仔细听哦,搬起小板凳,赶紧坐前面来. 第一步,nginx整个文件夹,放在自己电脑的任意盘里,建议直接放到某盘的根目录(D,E,F等盘): 第二,…

移动端页面(css)调试之“weinre大法”

移动端页面调试一般分两步.第一步我们需要把本地(pc端)写的页面效果展现在移动端,一个很方便的办法是用 fiddler 作为代理,具体可以参考如何用 fiddler 代理调试本地手机页面,这样我们就能在自己的手机上看到真机效果,有时还可以用 alert 调试一些 js:当然,有时仅仅展现样式还不够,我们希望能像 chrome 面板或者 firebug 一样查看元素的 css 样式,甚至可以在控制台看到 js 的 console 输出,UC浏览器开发者版可以方便地做到这点,具体可以参考如何使用…

移动端页面V2.0项目改版总结

移动端页面已经进行的第三次改版,这个版本遇到的最大难题就是页面跳转的问题. 项目需求: 页面上有分别有优惠估价.我要估价.历史竞拍这三个Tab选项卡,当用户点击估价,选择品牌以后,前端需要去请求品牌接口,获取品牌数据,进一步获取车系和车型. 项目实现:考虑到每个接口之间的数据传递问题.考虑把品牌车型车系的代码全部放在一个页面上.同事首先想到的是使用"前端路由" 这个东西.上网百度百度一下什么是前端路由.(可以读下这篇文字http://www.tuicool.com/articles/N…

用chrome和anywhere，配合安卓机搭建最简单的移动端页面测试。

很多时候,我们前端在写移动端页面的时候,虽然目前chrome有调试模式,可以模拟手机的部分效果,但仍有部分效果需要直接在手机上进行页面的调试,今天就在这里推荐一个适合windows+安卓的无需连接局域网即可测试的方法. 一.首先在PC和手机上分别下载chrome浏览器,同时用数据线将手机使用调试模式连接电脑,这一步很简单,百度也有很多教程就不重复介绍了. 二.在pc端的chrome浏览器中输入chrome://inspect ,即可进入调试状态.如果正确的连接了手机,则会出现如图所示的界面. 三…