橫豎屏判斷是網頁設計中經常遇到的問題，特別是在移動應用開發中，需要判斷頁面是否為橫屏。對于 CSS3 樣式，我們可以通過添加 `display: flex` 和 `flex-direction` 屬性來實現橫豎屏的判斷。

下面以百度百科為例，介紹橫豎屏判斷的實現過程：

1. 創建一個百度百科頁面，并添加以下 CSS 樣式：

```css

/* 定義頁面的父類樣式 */

.container {

width: 400px;

height: 300px;

display: flex;

flex-direction: column;

/* 定義百度百科頁面的子類樣式 */

.百度百科 {

width: 300px;

height: 200px;

background-color: #fff;

padding: 10px;

font-size: 16px;

2. 將頁面的父類樣式設置為 `display: flex`，并設置 `flex-direction` 為 `column`，這樣頁面就會被分成左右兩個部分。子類樣式設置為 `width: 300px; height: 200px;`，并設置背景色和字體大小。

3. 使用 JavaScript 檢查頁面的寬高是否相等，如果不相等，說明頁面是橫屏的，否則是豎屏的。可以使用以下代碼實現：

```javascript

// 獲取父容器的寬高

const containerWidth = document.querySelector('.container').offsetWidth;

const containerHeight = document.querySelector('.container').offsetHeight;

// 判斷父容器的寬高是否相等

if (containerWidth !== containerHeight) {

console.log('頁面是橫屏');

} else {

console.log('頁面是豎屏');

4. 將以上代碼復制到百度百科頁面的 JavaScript 文件中，并在頁面加載完成后調用即可。

通過以上步驟，就可以在百度百科頁面中實現橫豎屏的判斷。需要注意的是，由于移動設備的屏幕寬度不同，因此需要根據實際情況進行調整。