这里不说bootstrap和其他框架的自适应方案，仅用最基本的css属性来控制使用自适应方案的前提：
原创
2022-07-09 00:19:45
710阅读
国内绝大多数内容为主的网站(知乎，果壳，V2EX，网易新闻等)均使用内容区定宽布局，大多数电商网站(网易考拉，京东，聚美优品)也使用了内容区定宽的布局，也有些网站使用了自适应布局：天猫
内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的
写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况： <style> div{width:400px;height:400px;border:1px solid #000; } img{width:100%;height:100%;} </style> 不管容器有多大，只要将img的宽高设置
转载
2020-07-06 22:49:00
2800阅读
2评论
博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。之前大概知道怎么去改，但是页面太多实在觉得麻烦，就一直没有去改。当初做博客的时候也没有考虑到手机访问的重要性，所以现在虽然能改，但是也是缝缝补补。 一直想换一套模板的，又觉得要做的实在太多了。不过要想在手机上完美体验还是需要重新做一套前端了，现在先这样用着。 之前
转载
2023-09-18 09:34:04
116阅读
该方案目前已过时，这里是更加完美的替代方案——rem布局(进阶版)
相信很多刚开始写移动端页面的同志们都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果，这里主要介绍的是本人在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了----其实这种自适应方案是一
一套代码能够兼容适配不同的屏幕设备，内容不变布局效果变了，这样的网页就是响应式网页响应式和自适应的区别：响应式是一套代码通过检测视口分辨率展示不同的页面布局效果样式，是指据屏幕的大小自动的调整页面的展现方式，可以实现用一个网页自动适应不同大小的屏幕，页面内容一样布局效果改变。自适应布局是需要做多套页面，由服务端（根据用户代理）选择布局和大小合适的页面。自适应设计会根据屏幕尺寸和分辨率，
这是我把几个自适应的方式做了整理，供大家参考 媒体查询：
<name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！开发必备工具： chrome浏览器 一部手机 CSS手册（推荐菜鸟教程-CSS手册）好了，咱们开始吧！1、首先我先在电脑上打开网页2、接下来使用chrome浏览器自带的手机模拟器看看这个网页在手机上
转载
2024-04-07 08:37:02
50阅读
移动端方案的特点 如果说在PC端，我们可以用float/flex+定宽(如1000px)搞定布局，那么当下手机的型号尺寸多种多样，最流行的如iphone,华为，小米，VIVO等不同品牌的手机各自都有不同的型号，对应的多种多样的尺寸，这么多不同分辨率的手机，要一一适配工作量超级超级大了，简直无穷了。。可见，在手机端，通过定宽来搞定布局是不现实的，既然这样，可选的方案看上去只有百分比布局(所有元素尺
转载
2023-08-29 16:29:56
197阅读
# 实现jquery mobile PC手机自适应教程
## 前言
作为一名经验丰富的开发者，我将向你介绍如何实现jquery mobile PC手机自适应的方法。首先让我们来看一下整个流程的步骤：
| 步骤 | 描述 |
| ---- | ------------ |
| 1 | 引入jQuery库 |
| 2 | 引入jQuery Mobile库 |
| 3
原创
2024-06-05 06:38:31
98阅读
react版本 按1920/1080的比例进行缩放比例的换算，本地屏幕的宽高取innerWidth和innerHeight 在需要进行大屏适配的页面添加如下代码,大屏内部的计算单位直接使用px就可以了 //1、计算scale值，并存储在state中 getScale = () => { const ...
转载
2021-07-22 14:41:00
699阅读
2评论
在HTML文件的“<head>”标签之间输入以下语句并用手机打开即可看到效果： <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user
原创
2022-07-25 10:22:46
1114阅读
1、通过这段js来替代媒体查询（页面具体宽常见：720/750）单位用rem，通过js所得比例为100：1 此时假定html 即1rem = 100px 具体代码如下 ↓ function pgScale(){ var deviceWidth = document.documentElement.c ...
转载
2021-07-12 10:56:00
590阅读
2评论
响应式是按照pc,pad，mobile 不同尺寸显示不同的布局内容，通过媒体查询。自适应是手机端根据屏幕宽度做等比例的缩放。参考https://www.jianshu.com/p/b00cd3506782具体实现原理请参照：从网易与淘宝的font-size思考前端设计稿与工作流，写的很不错！希望对需要的朋友有所帮助！<!DOCTYPE html>
<html lang="en"&
转载
2023-07-29 20:36:04
207阅读
1、PC端做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080
使用了以下几种方案
1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常
2.长,宽,LEFT,TOP,RIGHT,BOTTOM都采
转载
2024-10-10 13:45:58
323阅读
目前比较常用的方法有：首先要让页面大小铺满屏幕又不能溢出。只需要在html<head>标签内加入viewport（如下），参数分别表示：页面宽度＝ 屏幕宽度，最大和最小伸缩比都是1，不允许用户拉缩。<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user
一、先了解下html5的viewport使用 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？html5 viewport的使用能帮你做到这一点.viewport 语法介绍：看下面
原型如下：要求如下：适应各种机型源码如下： --> .container { border: 1px solid #F0F1F1; -webkit-box-shadow: 0px 3px 3p
原创
2021-07-29 10:33:22
154阅读
原
转载
2017-11-27 14:55:00
93阅读
2评论
