前言打开浏览器，输入一个网址，显示一个页面，页面最基本的布局和框架用户一目了然。但是用户所用的浏览器、显示器、分辨率大多都是不一样的，如何确保不同用户持有不同设备所看到同一个网址的页面显示内容相同呢？当然像亚马逊首页那一种布局会更个性化一些，它会根据用户持有设备的屏幕大小而现实内容。例如：一部PC机上可能一排现实5个商品，一部iPad上可能显示3个商品，而一部手机上可能一排只显示1个商品。至少不要
一、自适应的分类1、大屏幕显示更多内容描述：即根据固定像素大小，显示内容根据显示器分辨率决定，分辨率越大，显示内容越多。 适应性：适合没有图表的页面，因为图表一般用作大屏展示，而大屏一般都是铺满整个屏幕的。2、不同屏幕显示相同内容描述：不同大小及分辨率的屏幕，只要宽高比例相同（例 16:9），其展示的内容就一致。 适应性：比较适合大屏展示，移动端和后台管理也可以用，但没必要。二、普通项目自适应（后
最近的一个小项目用到了自适应的布局方案，之前做过的一个移动端项目也用到了自适应的布局方案。当时公司只有我一个前端，以前的项目也没有使用过相关的技术，所以我需要从零开始了解相关的技术并且要能够在项目中应用。首先我们需要了解屏幕显示的一些原理，忽略各种屏幕的实现原理，一块屏幕上有固定数量的小方块，每个小方块就是一个屏幕物理像素点。屏幕的分辨率就是说的屏幕上像素点的数量。分辨率要和屏幕尺寸结合来看才有意
转载
2024-07-16 13:06:06
54阅读
0、H5新标签在IE9以下的浏览器识别<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->1、不同浏览器的标签默认的外margin 和内padding不同解决方案： css 里增加通配符 * { margin: 0;
目录1、媒体查询Media Queries2、 rem方式适配3、Flexible方案4、 vh、vw方案5、自适应百分比6、 Cover布局 和 Contain布局7、rem+vw目前为止出现的一些关于移动端适配的技术方案：① 通过媒体查询的方式即CSS3的 meida queries；② 以淘宝首页为代表的 rem+viewport 缩放③ 以天猫首页为代表的 Flexib
背景 随着移动设备和前端技术的发展，交互页面也在移动端使用越来越频繁。但是移动设备屏幕的大小和分辨率并不一致，这导致了并不能按照pc端编写页面的方式去编写移动端页面。 随着实践地不断进行和技术的发展，逐渐形成了下面几个概念：自适应（Adaptive） 程序
即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个
转载
2024-06-07 18:47:48
434阅读
最近在写一个关于小说阅读的webApp，由于没有借用任何框架，所以很多底层的内容都需要自己去解决，幸好的是这次
转载
2016-09-26 23:50:00
155阅读
2评论
pc端1.用js计算1rem = html之font-size 根据设计图 1366宽 html设置100px 100px的元素==1rem 比如实际浏览器 2732 宽 同样设置1rem ，那根元素要设置多少，使俩者比例一致 1366:100=2732:x 得x=200 html设置font-size=200px 而其他元素设置的rem不用变化var deviceWidth（不考虑兼容性可使用v
【笔记】前端开发，响应式与自适应布局总结 1、不同平台 使用uniapp做跨平台兼容，通常移动端的布局效果是统一的（无论是小程序还是H5移动端），但是h5的pc端一般会有新的布局需求，那么可以把页面的版块包装成一个个组件，在页面组件中仅给各个组件写布局，针对条件编译语句无法识别H5 PC的情况，就可以简单的用js在钩子函数中对布局做调整。 2、不同系统 不同系统下，比如ios和安卓下会
第一次做移动端的页面，遇到的第一个问题就是移动端的轮播图。其实轮播图的插件有很多，但是完全满足需求的并不容易找。需求：1.实现基本的触屏轮播图效果2.传入非标准比例的图片，可以自动平铺（有时候图片可能比例略有偏差，当然例子里的图是随便找的，平铺之后不能看呀）3.轮播图模块能实现自适应，按照固定高宽比显示，比如3：10的高宽比 一、初识rem那么这个需求的难点在哪里呢？其实就是我需要限定图
转载
2024-06-27 13:56:30
219阅读
4.25、多列布局自适应
解决不同设备提供不同版本的页面问题自适应布局
屏幕分辩率发生变化时，页面中的元素的位置会变化而大小不变4.25.1、两列自适应布局——左侧宽度固定，右侧宽度自适应1）左右两个盒子，左侧盒子宽度固定，右侧盒子宽度设置为100%2）左侧盒子设置绝对定位position:absolute;3）在右侧盒子中添加子盒，为子盒设置padding-left属性值，值为左侧盒子的宽度代码
转载
2024-05-07 11:47:06
88阅读
现在的移动终端（手机，pad）屏幕大小各不一样，为了适应每一种屏幕宽度而设计多款样式明显是不科学的，所以就有了自适应布局的概念。以前，实现自适应布局的时候，我使用了CSS3 @media 监测视口宽度，根据不同宽度实现不同的布局，从而实现一套CSS适配所有终端（PC，移动）。虽说听起来很方便，但实际上也是在尽量重用的前提下针对屏幕宽度调整部分样式而已，那有什么方法可以更简单地去适配移动端呢？rem
转载
2024-09-29 08:52:00
35阅读
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果，这里主要介绍的是本人在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了(function (doc, win) {
var docEl = doc.doc
之前发了一篇文章：移动端自适应：flexible.js可伸缩布局使用，里面用到了阿里的一个库：lib-flexible.js，里面有一些东西方法和自定义我这里制作的时候是不需要用到的，所以做了一个精简版的，另外还修复了UC浏览器竖屏与横屏转换的BUG。bug的重现，大家可以扫原来的DEMO（不要用微信，用其他），然后再uc浏览器下横屏与竖屏转换，发现代码并没有自适应。 之前我在“前端开发博客”的微
http://web.jobbole.com/86080/：（这可能是史上最全的CSS自适应总结）http://www.25xt.com/allcode/866.html(如何去设计一个自适应的网页设计或HTMl5) 所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。 大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CS
移动端自适应布局解决方案——rem
自适应布局方案有百分比布局、flex布局、弹性flex布局等，但是都有一些缺点。百分比布局缺点：字体大小需要另外一套自适应方法来调整；当屏幕宽度大于700px后，继续按照百分比元素会偏大，这个时候调整起来会比较麻烦。flex布局、弹性flex布局：在移动端会出现一些支持的兼容问题。remW3C官网描述是“font size of the root elem
页面自适应，是指页面内容自动适应屏幕大小。实现自适应的方法有多种：1、简易场景实现自适应：浮动、页面居中、设置百分比属性、自动匹配大小。这样在页面宽度发生变化时，能利用以上特性实现简易的自适应效果。2、如果实际开发中有复杂场景的需求，一般通过编写多套CSS代码，然后用媒体查询技术，让页面根据不同屏幕尺寸来加载不同代码模块以实现适配不同屏幕的目的。这种方式需要编写多套代码，虽然工作量大，但对于不同屏
转载
2024-04-01 10:55:32
281阅读
使用 ConstraintLayout 构建自适应界面
ConstraintLayout 可让您使用扁平视图层次结构(无嵌套视图组)创建复杂的大型布局。它与 RelativeLayout 相似，其中所有的视图均根据同级视图与父布局之间的关系进行布局，但其灵活性要高于 RelativeLayout，并且更易于与 Android Studio 的布局编辑器配合使用。
本文展示约束条件中的几种用法。
约
转载
2024-05-27 23:17:24
71阅读
一、宽高自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。（1）宽度自适应块元素宽度默认为auto（2） 高度自适应元素{height:auto;}/高度不写二、浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）解决高度塌陷的方法（
