之前发了一篇文章：移动端自适应：flexible.js可伸缩布局使用，里面用到了阿里的一个库：lib-flexible.js，里面有一些东西方法和自定义我这里制作的时候是不需要用到的，所以做了一个精简版的，另外还修复了UC浏览器竖屏与横屏转换的BUG。bug的重现，大家可以扫原来的DEMO（不要用微信，用其他），然后再uc浏览器下横屏与竖屏转换，发现代码并没有自适应。 之前我在“前端开发博客”的微
最近在写一个关于小说阅读的webApp，由于没有借用任何框架，所以很多底层的内容都需要自己去解决，幸好的是这次
转载
2016-09-26 23:50:00
155阅读
2评论
第一次做移动端的页面，遇到的第一个问题就是移动端的轮播图。其实轮播图的插件有很多，但是完全满足需求的并不容易找。需求：1.实现基本的触屏轮播图效果2.传入非标准比例的图片，可以自动平铺（有时候图片可能比例略有偏差，当然例子里的图是随便找的，平铺之后不能看呀）3.轮播图模块能实现自适应，按照固定高宽比显示，比如3：10的高宽比 一、初识rem那么这个需求的难点在哪里呢？其实就是我需要限定图
转载
2024-06-27 13:56:30
219阅读
移动端自适应布局解决方案——rem
自适应布局方案有百分比布局、flex布局、弹性flex布局等，但是都有一些缺点。百分比布局缺点：字体大小需要另外一套自适应方法来调整；当屏幕宽度大于700px后，继续按照百分比元素会偏大，这个时候调整起来会比较麻烦。flex布局、弹性flex布局：在移动端会出现一些支持的兼容问题。remW3C官网描述是“font size of the root elem
http://web.jobbole.com/86080/：（这可能是史上最全的CSS自适应总结）http://www.25xt.com/allcode/866.html(如何去设计一个自适应的网页设计或HTMl5) 所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。 大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CS
一、自适应的分类1、大屏幕显示更多内容描述：即根据固定像素大小，显示内容根据显示器分辨率决定，分辨率越大，显示内容越多。 适应性：适合没有图表的页面，因为图表一般用作大屏展示，而大屏一般都是铺满整个屏幕的。2、不同屏幕显示相同内容描述：不同大小及分辨率的屏幕，只要宽高比例相同（例 16:9），其展示的内容就一致。 适应性：比较适合大屏展示，移动端和后台管理也可以用，但没必要。二、普通项目自适应（后
现在的移动终端（手机，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
页面自适应，是指页面内容自动适应屏幕大小。实现自适应的方法有多种：1、简易场景实现自适应：浮动、页面居中、设置百分比属性、自动匹配大小。这样在页面宽度发生变化时，能利用以上特性实现简易的自适应效果。2、如果实际开发中有复杂场景的需求，一般通过编写多套CSS代码，然后用媒体查询技术，让页面根据不同屏幕尺寸来加载不同代码模块以实现适配不同屏幕的目的。这种方式需要编写多套代码，虽然工作量大，但对于不同屏
转载
2024-04-01 10:55:32
281阅读
使用 ConstraintLayout 构建自适应界面
ConstraintLayout 可让您使用扁平视图层次结构(无嵌套视图组)创建复杂的大型布局。它与 RelativeLayout 相似，其中所有的视图均根据同级视图与父布局之间的关系进行布局，但其灵活性要高于 RelativeLayout，并且更易于与 Android Studio 的布局编辑器配合使用。
本文展示约束条件中的几种用法。
约
转载
2024-05-27 23:17:24
71阅读
最近有报一个全栈课程，里面内容比较新颖，其中对scss样式管理的理念让我十分喜欢，各种操作让项目更加具有条理性。1.@mixin 在一个可以全局适用的scss文件中，姑且叫global.scss，写入：@mixin center(){
display:flex;
justify-content:center;
align-items:center;
} 用css的眼光看，这是一个弹
转载
2024-04-18 22:22:42
86阅读
这是我把几个自适应的方式做了整理，供大家参考 媒体查询：
<name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
最近的一个小项目用到了自适应的布局方案，之前做过的一个移动端项目也用到了自适应的布局方案。当时公司只有我一个前端，以前的项目也没有使用过相关的技术，所以我需要从零开始了解相关的技术并且要能够在项目中应用。首先我们需要了解屏幕显示的一些原理，忽略各种屏幕的实现原理，一块屏幕上有固定数量的小方块，每个小方块就是一个屏幕物理像素点。屏幕的分辨率就是说的屏幕上像素点的数量。分辨率要和屏幕尺寸结合来看才有意
转载
2024-07-16 13:06:06
54阅读
一、允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页
网上看到很多移动端适配的各种方法，由于原来工作中对rem的疏忽，所以决定重新学习rem~由于移动端特殊性，本文讲的是如何使用rem实现自适应，或叫rem响应式布局，通过使用一个脚本就可以rem自适应，不用再为各种设备宽度不同而烦恼如何实现自适应的问题。rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。1rem=16px(浏览器h
rem 是一种相对的尺度，相对于根元素设置的font-size,但不能简单粗暴的直接对根元素设置字号来决定1rem的大小。
原创
2019-07-18 17:23:25
1681阅读
简介：本篇适用于初次使用rem为单位切图而无从下手的童鞋。核心是根据屏幕动态改变根元素字体大小，以达到适配各种屏幕。这只是一个拿来就用的教程。很多东西没有详细说明。不过对于快速做手机端切图很有帮助。模板：Github 使用：1.下载完成后首先修改js文件中的基本单位：psd宽度是640就写640，是750就写750.现在的设计稿大部分是以iphone 6 为基准设计的，也就是750px。2.切图时
一套代码能够兼容适配不同的屏幕设备，内容不变布局效果变了，这样的网页就是响应式网页响应式和自适应的区别：响应式是一套代码通过检测视口分辨率展示不同的页面布局效果样式，是指据屏幕的大小自动的调整页面的展现方式，可以实现用一个网页自动适应不同大小的屏幕，页面内容一样布局效果改变。自适应布局是需要做多套页面，由服务端（根据用户代理）选择布局和大小合适的页面。自适应设计会根据屏幕尺寸和分辨率，
该方案目前已过时，这里是更加完美的替代方案——rem布局(进阶版)
相信很多刚开始写移动端页面的同志们都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果，这里主要介绍的是本人在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了----其实这种自适应方案是一
