web前端响应式布局,自适应全部分辨率
写phpd的我。
近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧。
响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架。仅仅是简单了解过,没真正实践啊。bootstrap比我想象的要好用的多。关键是。关键来了……
app端是仅仅有手机的,pc基本上木有。那就是说仅仅能依照手机端开发,那么boostrap响应式布局就不适用于app了(反正我是做了一套半成品,被推翻了)。不能愉快的工作了。好不淡定的时间。
。百度。百又问问同事。发现了amaze ui也就是妹子框架,最终能够省事了,太高兴了。
amaze框架下载后是一套让人极其郁闷的演示样例包。文件引入是分开来介绍的。假设你不细致看文档,会非常痛苦的(由于我就是如此,好折磨人)。
好了附上amaze的引入文件,仅供大伙參考。
对了手机端要在头部加上这句话
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
一切就绪。那就直奔主题。
手机端眼下最低宽度是300.只是说实话智能手机300的屏幕预计是木有,那就按iphone4的320来设计web。那么问题来了,设计给的參考图示640的肿么办,全部的像素除以2。一切解决。
使用amaze框架并不能非常好的解决不同分辨率的像素问题。并且最苦逼的就是要设置好多@media only screen and (min-width:320px) and (max-width:480px) {}屏幕范围样式。太痛苦了。受不了。。有木有一种能够控制的方法呢,京东是怎么弄的?小米又是怎么弄的?百度吧。一切从度娘中找答案。
答案好多,慢慢筛选吧……
于是找到这段代码
那么问题来了,这仅仅是页面的,我想要全部的地方在不同尺寸的浏览器都能自适应,怎解决?
clientwidth是获取屏幕显示的宽度。设定最小屏幕为320。以320为基础。那么最小最字体就是12px。于是就有了修改。
好了这下子不管什么浏览器都是以最宽320,最小12px为基准。
接着还有个问题,全部布局改用什么单位?px/em/pt/rem
px是最精确的单位,固定值。
em值不固定。继承父元素。rem在设定元素时仍是相对大小,但相对的是html根元素。pt就是印刷业上的单位。只是app开发中也用到。
那么好了,该用哪种的呢。我们先来看看上面的自适应js运行效果。
在html元素中生成了一个行内字体样式,答案就有了吧。
转载请注明出处: web前端响应式布局,自适应全部分辨率→艾瑞可erik(http://www.erik.xyz/)
web前端响应式布局,自适应全部分辨率相关推荐
- WEB前端响应式布局之BootStarp使用
1.Bootstrap简介: 1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript ...
- Vue 项目前端响应式布局及框架搭建
Vue 项目前端响应式布局及框架搭建 一.flexible 插件 1.引用 flexible 插件 2.修改 flexible 默认配置 3.展示效果 二.cssrem 插件 (px -> re ...
- 【Vue】Vue 项目前端响应式布局及框架搭建
文章目录 Vue 项目前端响应式布局及框架搭建 一.项目基本结构 二.项目分辨率响应式创建 1.flexible.js 2.引用 flexible 插件 3.修改 flexible 默认配置 4.cs ...
- 移动端web页面响应式布局(文字、图片、表格)
移动端web页面响应式布局 絮絮叨叨: 最近被领导抓去写了个前端页面,还要是适应移动端的..还三天要完成..前端小白 的我硬生生刚出来了,这两天正好闲了点,总结总结. 设置meta 写过前端的小伙伴们 ...
- 前端响应式布局原理与方案(详细版)
引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局.传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重.下面是博客网站对不同设备适配后的结 ...
- Web前端响应式框架
响应式网页的设计与实现 最近学前端接触到了框架,介绍并记录自己的学习收获. 前言 各种移动智能设备的广泛应用,带动了互联网应用向移动平台方向发展,并呈现多元化的趋势.但智能手机.平板电脑.智能手表等多 ...
- 移动端WEB开发——响应式布局
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 设备划分 尺寸区间 超 ...
- vw 前端_一行css代码轻松实现前端响应式布局(vw+rem)
大家知道rem可以用来做响应式布局,只是html元素上的font-size样式需要根据屏幕宽度来指定. 之前有用@media媒体查询,根据各种屏幕宽度写html的样式,也用过类似lib-flexibl ...
- Web前端---响应式室内家具网页设计(HTML+CSS+JS)
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
最新文章
- simple_html_dom meta,HTML DOM Meta content 属性
- Java中反射的三种常用方式
- 关于引进制转换(凌乱)
- LiveVideoStackCon 专题评审团招募进行中
- 使用canvas实现擦玻璃效果
- 旅游系统_旅游标识系统,必须真的“旅游化”
- Redis4.0.13 安装踩雷记录
- 【python】通讯录制作
- tpadmin的坑收集 nginx下配置tp5失败
- 如何在自己行业内放大和增加收入
- PAT_乙级_1003_筱筱
- Java实现随机生成车牌号
- 电脑突然找不到蓝牙开关了
- 计算机运行库,VC2010运行库
- 量子通信利用量子力学原理产生密钥对信息进行加密和解密,并采用量子纠缠效应进行密钥分发,被认为是当今最安全的通信系统.有两项特性,一个是不可分割,一个是不可复制...
- 51单片机 按键控制LED流水灯模式
- 什么叫做实体经济危机?
- 2021Java面试心得:java性能优化实践pdf
- 实现手机扫码直接拨打电话
- 吴恩达出任Woebot董事长,再度出手医疗领域帮人们治疗抑郁症
热门文章
- php5.6non thread safe 区别,PHP版本Non Thread Safe和Thread Safe如何选择?区别是什么?
- java新闻分页_新闻实现分页显示
- kubectl 创建pvc_k8s的持久化存储PVPVC
- python开发范围_Python上的字母范围
- gen文件下有两个R.java_gen目录无法更新,或者gen目录下的R.JAVA文件无法生成
- python selenium鼠标点击_Python+Selenium学习--鼠标事件
- jquery parsley ajax,用户体验超棒且功能强大使用简单的javascript表单验证 - Parsley.js...
- python程序中怎样数个数_python3中的代码行数是怎么计算的?
- linux route 刷新_linux基础命令介绍十五:推陈出新
- Django项目与中间件与celery